From bbdc5ac8a8ddac6d0c7fc5328628e15e5d286a89 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 29 Sep 2025 14:31:05 -0500
Subject: [PATCH 1/3] Move rename dialog inside the menu div

---
 app/views/collections/show/_column.html.erb      | 10 ----------
 app/views/collections/show/menu/_column.html.erb | 10 ++++++++++
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/views/collections/show/_column.html.erb b/app/views/collections/show/_column.html.erb
index 147593c6d..cc7ac0697 100644
--- a/app/views/collections/show/_column.html.erb
+++ b/app/views/collections/show/_column.html.erb
@@ -11,15 +11,5 @@
     <%= render "collections/show/menu/column", column: column %>
   <% end %>
 
-  <div data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-    <button id="<%= dom_id(column, :manage_menu) %>" class="popup__btn btn" data-action="click->dialog#open:stop" data-clicker-target="clickable" hidden aria-hidden>Rename column</button>
-    <dialog class="popup panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
-      <%= form_with model: [column.collection, column], data: { action: "turbo:submit-end->dialog#close" } do |form| %>
-        <%= form.text_field :name, class: "input", placeholder: "Column name", value: column.name, required: true %>
-        <%= form.submit "Rename column", class: "btn btn--link" %>
-      <% end %>
-    </dialog>
-  </div>
-
   <%= column_frame_tag dom_id(column, :cards), src: collection_column_path(column.collection, column) %>
 </section>
diff --git a/app/views/collections/show/menu/_column.html.erb b/app/views/collections/show/menu/_column.html.erb
index f719420d4..05f79208f 100644
--- a/app/views/collections/show/menu/_column.html.erb
+++ b/app/views/collections/show/menu/_column.html.erb
@@ -23,4 +23,14 @@
       </li>
     </ul>
   </dialog>
+
+  <div data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+    <button id="<%= dom_id(column, :manage_menu) %>" class="popup__btn btn" data-action="click->dialog#open:stop" data-clicker-target="clickable" hidden aria-hidden>Rename column</button>
+    <dialog class="popup panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
+      <%= form_with model: [column.collection, column], data: { action: "turbo:submit-end->dialog#close" } do |form| %>
+        <%= form.text_field :name, class: "input", placeholder: "Column name", value: column.name, required: true %>
+        <%= form.submit "Rename column", class: "btn btn--link" %>
+      <% end %>
+    </dialog>
+  </div>
 </div>

From 6d167e560c436d387fd7e1bc4a8e156df5445d10 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 29 Sep 2025 14:36:29 -0500
Subject: [PATCH 2/3] CSS cleanup

---
 app/assets/stylesheets/card-columns.css        | 18 ++----------------
 .../collections/show/menu/_column.html.erb     |  2 +-
 .../collections/show/menu/_columns.html.erb    |  2 +-
 3 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 80573c4d6..4ad6a642a 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -189,10 +189,9 @@
     }
 
     .cards:not(.is-collapsed) & {
-      display: grid;
-      grid-template-columns: auto 1fr auto;
       inline-size: 100%;
       margin-block-end: calc(-0.5 * var(--cards-gap));
+      justify-content: center;
 
       &:hover,
       &:has(~ .cards__expander-menu:hover) {
@@ -207,14 +206,13 @@
     inline-size: var(--column-width-collapsed);
 
     .cards:not(.is-collapsed) & {
-      opacity: 0;
+      display: none;
     }
   }
 
   .cards__expander-title {
     font-weight: inherit;
     font-size: inherit;
-    grid-column: 2;
     line-height: var(--column-width-collapsed);
 
     .cards.is-collapsed & {
@@ -466,7 +464,6 @@
       color: var(--card-text-color);
     }
 
-    /* The following groups the header and title on considering cards */
     .card__header {
       color: var(--color-ink);
       padding-block-start: calc(var(--card-padding-block) / 2);
@@ -480,16 +477,6 @@
     .card__body {
       padding-block: 0 var(--card-padding-block);
     }
-    /* End */
-
-    /* The Uncomment the following to add borders and such */
-    /*
-    .card__collection {
-      border-block-end: var(--card-border);
-      border-inline-end: var(--card-border);
-    }
-    */
-    /* End */
 
     .card--drafted {
       --card-color: var(--color-ink-medium) !important;
@@ -508,7 +495,6 @@
     }
   }
 
-
   .card.card--new {
     --border-color: var(--color-selected-dark);
     --border-size: 1px;
diff --git a/app/views/collections/show/menu/_column.html.erb b/app/views/collections/show/menu/_column.html.erb
index 05f79208f..9b27bc2a0 100644
--- a/app/views/collections/show/menu/_column.html.erb
+++ b/app/views/collections/show/menu/_column.html.erb
@@ -26,7 +26,7 @@
 
   <div data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
     <button id="<%= dom_id(column, :manage_menu) %>" class="popup__btn btn" data-action="click->dialog#open:stop" data-clicker-target="clickable" hidden aria-hidden>Rename column</button>
-    <dialog class="popup panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
+    <dialog class="popup panel flex-column gap-half fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
       <%= form_with model: [column.collection, column], data: { action: "turbo:submit-end->dialog#close" } do |form| %>
         <%= form.text_field :name, class: "input", placeholder: "Column name", value: column.name, required: true %>
         <%= form.submit "Rename column", class: "btn btn--link" %>
diff --git a/app/views/collections/show/menu/_columns.html.erb b/app/views/collections/show/menu/_columns.html.erb
index 357ecf60c..0acc0e952 100644
--- a/app/views/collections/show/menu/_columns.html.erb
+++ b/app/views/collections/show/menu/_columns.html.erb
@@ -2,7 +2,7 @@
   <button class="btn btn--circle txt-x-small borderless" data-action="click->dialog#open:stop" aria-label="Add a new column, etc.">
     <%= icon_tag "add", class: "translucent", "aria-hidden": true %>
   </button>
-  <dialog class="popup panel flex-column gap fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
+  <dialog class="popup panel flex-column gap-half fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
     <%= form_with model: [ collection, Column.new ], data: { controller: "form", action: "turbo:submit-end->dialog#close turbo:submit-end->form#reset" } do |form| %>
       <%= form.text_field :name, class: "input", placeholder: "Column name", required: true, autocomplete: "off" %>
       <%= form.submit "Add a column", class: "btn btn--link" %>

From 5768eb26e8024db373d466e84f136a6f94915bad Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 29 Sep 2025 15:52:02 -0500
Subject: [PATCH 3/3] Better padding for popup items

---
 app/assets/stylesheets/popup.css | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index c864655a4..11c394ff8 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -5,7 +5,7 @@
     --panel-padding: var(--block-space);
     --panel-size: auto;
     --popup-icon-size: 24px;
-    --popup-item-padding-inline: var(--inline-space-half);
+    --popup-item-padding-inline: 0.5rem;
 
     inset: 0 auto auto 50%;
     max-block-size: 80vh;
@@ -122,14 +122,6 @@
         }
       }
     }
-
-    &:has(> :first-child:not(.popup__btn)) {
-      padding-inline-start: var(--popup-item-padding-inline);
-    }
-
-    &:has(> :last-child:not(.popup__btn)) {
-      padding-inline-end: var(--popup-item-padding-inline);
-    }
   }
 
   /* The actionable thing with padding within popup__item */
@@ -165,6 +157,7 @@
     --icon-size: 1em;
 
     inline-size: var(--popup-icon-size);
+    margin-inline-start: var(--popup-item-padding-inline);
   }
 
   .popup__radio {
@@ -172,6 +165,7 @@
 
     block-size: var(--popup-icon-size);
     inline-size: var(--popup-icon-size);
+    margin-inline-start: var(--popup-item-padding-inline);
     flex-shrink: 0;
 
     &:hover {