From 036768fedeeab098296e33c0f31e7f7cc2973710 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 16 Jan 2026 14:30:47 -0600
Subject: [PATCH] Create popup initial alignment classes

---
 app/assets/stylesheets/card-columns.css       | 1 +
 app/assets/stylesheets/cards.css              | 2 +-
 app/assets/stylesheets/popup.css              | 5 +++++
 app/views/boards/show/menu/_column.html.erb   | 2 +-
 app/views/cards/display/perma/_board.html.erb | 2 +-
 5 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index c2e31cc17..3409b83de 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -378,6 +378,7 @@
   }
 
   .cards__menu {
+    position: relative;
     z-index: var(--z-popup);
   }
 
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index a084b0592..3aec6e3b0 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -83,7 +83,7 @@
     }
 
     dialog {
-      inset: 100% auto auto 0;
+      inset-block-start: 100%;
     }
   }
 
diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index bfbefc87a..e27494153 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -21,11 +21,16 @@
       display: var(--popup-display);
     }
 
+    /* The .pop-up--align-<drection> classes are used for initial alignment.
+     * The orient JS helper layers on the .orient-<direction> to avoid running
+     * off the edge of the screen and will override .popup--align */
+    &:where(.popup--align-left),
     &.orient-left {
       inset-inline: auto 0;
       transform: translateX(0);
     }
 
+    &:where(.popup--align-right),
     &.orient-right {
       inset-inline: 0 auto;
       transform: translateX(0);
diff --git a/app/views/boards/show/menu/_column.html.erb b/app/views/boards/show/menu/_column.html.erb
index fa3ab38ff..ebfdd3855 100644
--- a/app/views/boards/show/menu/_column.html.erb
+++ b/app/views/boards/show/menu/_column.html.erb
@@ -3,7 +3,7 @@
     <%= icon_tag "menu-dots-horizontal", class: "translucent" %>
     <span class="for-screen-reader">Column options</span>
   </button>
-  <dialog class="popup panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
+  <dialog class="popup popup--align-right panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
     <ul class="popup__list">
       <li class="popup__item">
         <button class="popup__btn btn" data-action="click->clicker#click">
diff --git a/app/views/cards/display/perma/_board.html.erb b/app/views/cards/display/perma/_board.html.erb
index 7c833712e..381a7e4f9 100644
--- a/app/views/cards/display/perma/_board.html.erb
+++ b/app/views/cards/display/perma/_board.html.erb
@@ -3,7 +3,7 @@
     <%= icon_tag "caret-down", class: "txt-xx-small", hidden: card.closed? %>
   <% end %>
   <button class="card__board-picker-button btn btn--plain" data-action="click->dialog#open:stop" aria-label="Choose a board for this card" <%= "hidden" if card.closed? %>></button>
-  <dialog class="popup panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-morph-attribute->dialog#preventCloseOnMorphing turbo:submit-end->dialog#close">
+  <dialog class="popup popup--align-right panel flex-column align-start gap-half fill-white shadow" data-dialog-target="dialog" data-action="turbo:before-morph-attribute->dialog#preventCloseOnMorphing turbo:submit-end->dialog#close">
     <%= turbo_frame_tag "board_picker", src: edit_card_board_path(card), target: "_top", loading: :lazy, refresh: "morph" %>
   </dialog>
 </div>