Extract orient into a module

app/assets/stylesheets/orient.css

@@ -0,0 +1,13 @@
+@layer utilities {
+  .orient-left {
+    inset-inline: auto 0;
+    transform: translateX(0);
+    background: lime !important;
+  }
+
+  .orient-right {
+    inset-inline: 0 auto;
+    transform: translateX(0);
+    background: gold !important;
+  }
+}

app/assets/stylesheets/popup.css

@@ -10,18 +10,13 @@
     max-inline-size: min(55ch, calc(100dvw - var(--block-space-double)));
     overflow: auto;
     position: absolute;
-    translate: -50% 0;
+    transform: translateX(-50%);
     z-index: var(--z-popup);
 
     &[open] {
       display: flex;
     }
 
-    &.orient-left {
-      inset-inline: auto 0;
-      translate: 0;
-    }
-
     &:has(.popup__footer) {
       --panel-padding: var(--block-space) var(--block-space) 0 var(--block-space);
     }

app/javascript/controllers/dialog_controller.js

@@ -1,6 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-
-const EDGE_THRESHOLD = 90
+import { orient } from "helpers/orientation_helpers"
 
 export default class extends Controller {
   static targets = [ "dialog" ]
@@ -19,8 +18,9 @@ export default class extends Controller {
       this.dialogTarget.showModal()
     } else {
       this.dialogTarget.show()
+      orient(this.dialogTarget)
     }
-    this.#orient(this.dialogTarget)
+
     this.dialogTarget.setAttribute('aria-hidden', 'false')
     this.dispatch("show")
   }
@@ -42,26 +42,4 @@ export default class extends Controller {
   closeOnClickOutside({ target }) {
     if (!this.element.contains(target)) this.close()
   }
-
-  #orient(element) {
-    element.classList.toggle("orient-left", this.#distanceToRight < EDGE_THRESHOLD)
-    element.classList.toggle("orient-right", this.#distanceToLeft < EDGE_THRESHOLD)
-    element.classList.toggle("orient-top", this.#distanceToBottom < EDGE_THRESHOLD)
-  }
-
-  get #distanceToLeft() {
-    return this.#boundingClientRect.left
-  }
-
-  get #distanceToRight() {
-    return window.innerWidth - this.#boundingClientRect.right
-  }
-
-  get #distanceToBottom() {
-    return window.innerHeight - this.#boundingClientRect.bottom
-  }
-
-  get #boundingClientRect() {
-    return this.dialogTarget.getBoundingClientRect()
-  }
 }

app/javascript/helpers/orientation_helpers.js

@@ -0,0 +1,19 @@
+const EDGE_THRESHOLD = 16
+
+export function orient(el) {
+  el.classList.toggle("orient-left", spaceOnRight(el) < EDGE_THRESHOLD)
+  el.classList.toggle("orient-right", spaceOnLeft(el) < EDGE_THRESHOLD)
+  el.classList.toggle("orient-top", spaceOnBottom(el) < EDGE_THRESHOLD)
+}
+
+function spaceOnLeft(el) {
+  return el.getBoundingClientRect().left
+}
+
+function spaceOnRight(el) {
+  return window.innerWidth - el.getBoundingClientRect().right
+}
+
+function spaceOnBottom(el) {
+  return window.innerHeight - el.getBoundingClientRect().bottom
+}