From 19ce79965b6df4f1b4ba37c8fd5a9f79044ddc6e Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 16 Jan 2026 14:00:04 -0600
Subject: [PATCH] Align board and tag picker dialogs without using math

---
 app/assets/stylesheets/card-perma.css         | 11 ----
 app/assets/stylesheets/cards.css              | 63 ++++++++++++++++---
 app/assets/stylesheets/print.css              |  4 +-
 app/assets/stylesheets/tags.css               | 33 ----------
 .../cards/display/common/_board.html.erb      | 16 +++--
 app/views/cards/display/perma/_board.html.erb | 23 +++----
 app/views/cards/display/perma/_tags.html.erb  |  4 +-
 .../cards/display/preview/_board.html.erb     |  4 +-
 8 files changed, 77 insertions(+), 81 deletions(-)
 delete mode 100644 app/assets/stylesheets/tags.css

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 8d1340c23..073508bff 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -119,17 +119,6 @@
       }
     }
 
-    .board-picker__button {
-      --btn-border-size: 0;
-
-      font-size: 0.5em;
-      margin-inline-start: 1ch;
-
-      + .panel {
-        --panel-size: 18ch;
-      }
-    }
-
     .bubble {
       --bubble-number-max: 42px;
       --bubble-size: 6rem;
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 3fb0a7f4d..646f060a7 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -71,21 +71,19 @@
     min-inline-size: 0;
     padding-block: 0.25lh;
     padding-inline: var(--card-padding-inline) 1ch;
+    position: relative;
+    transition: background-color 100ms ease-out;
 
-    &:has(.board-picker__button) {
-      cursor: pointer;
-      transition: background-color 100ms ease-out;
-
+    &:has(.btn) {
       @media (any-hover: hover) {
         &:hover {
           background-color: color-mix(in srgb, var(--card-color) 90%, var(--color-ink));
         }
       }
+    }
 
-      &:has(.btn:focus-visible) {
-        outline: var(--focus-ring-size) solid var(--focus-ring-color);
-        outline-offset: var(--focus-ring-offset);
-      }
+    dialog {
+      inset: 100% auto auto 0;
     }
   }
 
@@ -99,9 +97,11 @@
   }
 
   .card__board-name {
+    align-items: center;
     border-inline-start: 1px solid color-mix(in hsl, transparent 75%, currentColor);
     color: currentColor;
     display: flex;
+    gap: 0.25ch;
     margin-inline-start: var(--card-header-space);
     max-inline-size: 100%;
     min-inline-size: 0;
@@ -109,14 +109,59 @@
     text-transform: uppercase;
   }
 
+  .card__board-picker-btn {
+    inset: 0;
+    position: absolute;
+  }
+
   .card__tags {
     --btn-color: var(--card-color);
 
     align-items: center;
+    align-self: stretch;
     color: var(--card-text-color);
     display: flex;
-    gap: var(--card-header-space);
+    gap: 0.5ch;
     min-inline-size: 0;
+
+    [data-controller="dialog"] {
+      align-items: center;
+      align-self: stretch;
+      display: flex;
+      position: relative;
+    }
+
+    .popup {
+      --panel-size: 18ch;
+
+      inset-block-start: 100%;
+    }
+  }
+
+  .card__tag-picker {
+    --panel-border-radius: 2em;
+    --panel-padding: 0.5em 0.7em;
+    --panel-size: max-content;
+
+    inline-size: auto !important;
+    inset: 0 auto auto 0;
+    max-inline-size: var(--panel-size) !important;
+    position: absolute;
+    z-index: 2;
+
+    &[open] {
+      display: flex;
+    }
+
+    .input {
+      --input-padding: 0.2em 0.5em;
+
+      inline-size: 18ch;
+    }
+  }
+
+  .card__tag-picker-button {
+    font-size: 0.6em;
   }
 
   .card__tag {
diff --git a/app/assets/stylesheets/print.css b/app/assets/stylesheets/print.css
index 5ed9c3fdf..cd55b5196 100644
--- a/app/assets/stylesheets/print.css
+++ b/app/assets/stylesheets/print.css
@@ -164,8 +164,8 @@
   .comments__subscribers,
   .card__meta-avatars--assignees > div > div:last-child,
   .steps > .step:last-child,
-  div:has(> .tag-picker__button),
-  div:has(> .board-picker__button),
+  .card__board-name .icon,
+  div:has(> .card__tag-picker-button),
   .delete-card,
   .header--card .header__title {
     display: none;
diff --git a/app/assets/stylesheets/tags.css b/app/assets/stylesheets/tags.css
deleted file mode 100644
index 90d51e011..000000000
--- a/app/assets/stylesheets/tags.css
+++ /dev/null
@@ -1,33 +0,0 @@
-@layer components {
-  .tag-picker {
-    --panel-border-radius: 2em;
-    --panel-padding: 0.5em 0.7em;
-    --panel-size: max-content;
-
-    inline-size: auto !important;
-    inset: 0 auto auto 0;
-    max-inline-size: var(--panel-size) !important;
-    position: absolute;
-    z-index: 2;
-
-    &[open] {
-      display: flex;
-    }
-
-    .input {
-      --input-padding: 0.2em 0.5em;
-
-      inline-size: 18ch;
-    }
-  }
-
-  .tag-picker__button {
-    font-size: 0.6em;
-    margin-block-start: 0.1em;
-    margin-inline-start: 0.2em;
-
-    + .panel {
-      --panel-size: 18ch;
-    }
-  }
-}
diff --git a/app/views/cards/display/common/_board.html.erb b/app/views/cards/display/common/_board.html.erb
index 3e91a0d78..e5595ab39 100644
--- a/app/views/cards/display/common/_board.html.erb
+++ b/app/views/cards/display/common/_board.html.erb
@@ -1,10 +1,8 @@
-<label class="card__board">
-  <span class="card__id">
-    <span class="for-screen-reader">Card number</span>
-    <%= card.number %>
-  </span>
-  <span class="card__board-name">
-    <span class="overflow-ellipsis"><%= card.board.name %></span>
-  </span>
+<div class="card__id">
+  <span class="for-screen-reader">Card number</span>
+  <%= card.number %>
+</div>
+<div class="card__board-name">
+  <span class="overflow-ellipsis"><%= card.board.name %></span>
   <%= yield %>
-</label>
+</div>
diff --git a/app/views/cards/display/perma/_board.html.erb b/app/views/cards/display/perma/_board.html.erb
index 4814aa797..68b865f75 100644
--- a/app/views/cards/display/perma/_board.html.erb
+++ b/app/views/cards/display/perma/_board.html.erb
@@ -1,14 +1,9 @@
-<%= render "cards/display/common/board", card: card do %>
-  <div class="align-self-center position-relative txt-small"
-      data-controller="dialog"
-      data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside mouseenter->dialog#loadLazyFrames" <%= "hidden" if card.closed? %>>
-    <button class="board-picker__button btn btn--reversed card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
-      <%= icon_tag "caret-down" %>
-      <span class="for-screen-reader">Choose a board for this card</span>
-    </button>
-
-    <dialog class="popup panel flex-column align-start gap-half fill-white shadow margin-block-double" 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>
-<% end %>
+<div class="card__board" data-controller="dialog" data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside mouseenter->dialog#loadLazyFrames">
+  <%= render "cards/display/common/board", card: card do %>
+    <%= icon_tag "caret-down", class: "txt-xx-small" %>
+  <% end %>
+  <button class="card__board-picker-btn btn btn--plain" data-action="click->dialog#open:stop" aria-label="Choose a board for this card"></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">
+    <%= turbo_frame_tag "board_picker", src: edit_card_board_path(card), target: "_top", loading: :lazy, refresh: "morph" %>
+  </dialog>
+</div>
diff --git a/app/views/cards/display/perma/_tags.html.erb b/app/views/cards/display/perma/_tags.html.erb
index 2fb747d27..ea4d1f76b 100644
--- a/app/views/cards/display/perma/_tags.html.erb
+++ b/app/views/cards/display/perma/_tags.html.erb
@@ -1,7 +1,7 @@
 <div id="<%= dom_id(card, :tags) %>" class="card__tags">
-  <div class="position-relative" data-controller="dialog"
+  <div data-controller="dialog"
         data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside mouseenter->dialog#loadLazyFrames" <%= "hidden" if card.closed? %>>
-    <button class="tag-picker__button btn card__hide-on-index" style="--btn-background: var(--card-bg-color);"
+    <button class="card__tag-picker-button btn card__hide-on-index" style="--btn-background: var(--card-bg-color);"
         data-controller="tooltip hotkey" data-action="click->dialog#open:stop keydown.t@document->hotkey#click">
       <%= icon_tag "tag" %>
       <span class="for-screen-reader">Add a tag</span>
diff --git a/app/views/cards/display/preview/_board.html.erb b/app/views/cards/display/preview/_board.html.erb
index 70544c6f0..50416ca51 100644
--- a/app/views/cards/display/preview/_board.html.erb
+++ b/app/views/cards/display/preview/_board.html.erb
@@ -1 +1,3 @@
-<%= render "cards/display/common/board", card: card  %>
+<div class="card__board">
+  <%= render "cards/display/common/board", card: card  %>
+</div>