From c444011095c86896c2058fcaaced0fe312a8d5ea Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 14 Aug 2025 14:59:50 -0500
Subject: [PATCH] Working left/right orientation

---
 app/assets/stylesheets/popup.css              |  7 +++++-
 .../controllers/dialog_controller.js          | 25 ++++++++++---------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 7ef87d85d..c74350ab2 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -10,13 +10,18 @@
     max-inline-size: min(55ch, calc(100dvw - var(--block-space-double)));
     overflow: auto;
     position: absolute;
-    transform: translateX(-50%);
+    translate: -50% 0;
     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);
     }
diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js
index d86bc1c08..553de7361 100644
--- a/app/javascript/controllers/dialog_controller.js
+++ b/app/javascript/controllers/dialog_controller.js
@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 
-const BOTTOM_THRESHOLD = 90
+const EDGE_THRESHOLD = 90
 
 export default class extends Controller {
   static targets = [ "dialog" ]
@@ -20,7 +20,7 @@ export default class extends Controller {
     } else {
       this.dialogTarget.show()
     }
-    this.#orient()
+    this.#orient(this.dialogTarget)
     this.dialogTarget.setAttribute('aria-hidden', 'false')
     this.dispatch("show")
   }
@@ -43,23 +43,24 @@ export default class extends Controller {
     if (!this.element.contains(target)) this.close()
   }
 
-  #orient() {
-    console.log("ORIENT")
-    console.log(`distanceToBottom = ${this.#distanceToBottom}`)
-    console.log(`maxWidth = ${this.#maxWidth}px`)
+  #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)
+  }
 
-    this.dialogTarget.classList.toggle("ANDYSMITH", this.#distanceToBottom < BOTTOM_THRESHOLD)
-    this.dialogTarget.style.setProperty("--max-width", this.#maxWidth + "px")
+  get #distanceToLeft() {
+    return this.#boundingClientRect.left
+  }
+
+  get #distanceToRight() {
+    return window.innerWidth - this.#boundingClientRect.right
   }
 
   get #distanceToBottom() {
     return window.innerHeight - this.#boundingClientRect.bottom
   }
 
-  get #maxWidth() {
-    return window.innerWidth - this.#boundingClientRect.left
-  }
-
   get #boundingClientRect() {
     return this.dialogTarget.getBoundingClientRect()
   }