From 27ccde841942e55e4209d91c5690dec33d7dfe52 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 29 Sep 2025 10:34:15 -0500
Subject: [PATCH] Position expander menu

---
 app/assets/stylesheets/card-columns.css          |  8 +++++++-
 app/views/collections/show/_expander.html.erb    | 14 ++++++--------
 app/views/collections/show/menu/_column.html.erb |  3 ++-
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 96d77ab0b..80573c4d6 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -194,7 +194,8 @@
       inline-size: 100%;
       margin-block-end: calc(-0.5 * var(--cards-gap));
 
-      &:hover {
+      &:hover,
+      &:has(~ .cards__expander-menu:hover) {
         background-color: var(--column-color);
         filter: none;
       }
@@ -222,6 +223,11 @@
   }
 
   .cards__expander-menu {
+    inset: 0 0 auto auto;
+    position: absolute;
+    translate: calc(var(--column-gap) * -2);
+    z-index: var(--z-popup);
+
     .btn--circle {
       --btn-background: transparent;
 
diff --git a/app/views/collections/show/_expander.html.erb b/app/views/collections/show/_expander.html.erb
index 11c4c5ec7..42a2035ff 100644
--- a/app/views/collections/show/_expander.html.erb
+++ b/app/views/collections/show/_expander.html.erb
@@ -1,8 +1,6 @@
-<div>
-  <header class="cards__expander" data-collapsible-columns-target="button" data-action="click->collapsible-columns#toggle"
-    style="--card-count: <%= [ count, 20 ].min %>" role="button" aria-controls="<%= column_id %>" aria-expanded="false">
-    <span class="cards__expander-count" data-drag-and-drop-counter="true"><%= count > 99 ? "99+" : count %></span>
-    <h2 class="cards__expander-title"><%= title %></h2>
-  </header>
-  <%= yield if block_given? %>
-</div>
+<header class="cards__expander" data-collapsible-columns-target="button" data-action="click->collapsible-columns#toggle"
+  style="--card-count: <%= [ count, 20 ].min %>" role="button" aria-controls="<%= column_id %>" aria-expanded="false">
+  <span class="cards__expander-count" data-drag-and-drop-counter="true"><%= count > 99 ? "99+" : count %></span>
+  <h2 class="cards__expander-title"><%= title %></h2>
+</header>
+<%= yield if block_given? %>
diff --git a/app/views/collections/show/menu/_column.html.erb b/app/views/collections/show/menu/_column.html.erb
index 80d91f4b2..8019b2d46 100644
--- a/app/views/collections/show/menu/_column.html.erb
+++ b/app/views/collections/show/menu/_column.html.erb
@@ -1,4 +1,4 @@
-<div class="cards__expander-menu position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+<div class="cards__expander-menu" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
   <button class="btn btn--circle txt-x-small borderless" data-action="click->dialog#open">
     <%= icon_tag "menu-dots-horizontal", class: "translucent" %>
     <span class="for-screen-reader">Column options</span>
@@ -18,6 +18,7 @@
         <%= button_to "Delete column", collection_column_path(column.collection, column),
               method: :delete,
               class: "popup__btn btn",
+                form_class: "display-contents",
               form: { data: { turbo_confirm: "Are you sure you want to delete this column? This will move the cards back to the stream." } } %>
       </li>
     </ul>