From 418406e6ee6b5fe0dbaa781ed8dac19d17e5bfa6 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 25 Sep 2025 11:45:25 -0500
Subject: [PATCH] Align column overflow better

---
 app/assets/stylesheets/card-columns.css | 16 ++++++++++++++--
 app/helpers/cards_helper.rb             |  2 +-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index cae621091..1f4c3e28d 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -101,6 +101,7 @@
   .cards__expander {
     align-items: center;
     border-radius: 99rem;
+    cursor: pointer;
     display: flex;
     flex-direction: row-reverse;
     font-size: var(--text-x-small);
@@ -108,9 +109,12 @@
     gap: 0.5ch;
     position: relative;
     text-transform: uppercase;
+    transition: 100ms ease-out;
 
-    > * {
-      grid-area: unset !important;
+    @media (any-hover: hover) {
+      &:hover {
+        filter: brightness(0.9);
+      }
     }
 
     .cards.is-collapsed & {
@@ -162,6 +166,7 @@
 
   .cards__expander-count {
     line-height: var(--column-width-collapsed);
+    inline-size: var(--column-width-collapsed);
 
     .cards:not(.is-collapsed) & {
       opacity: 0;
@@ -180,6 +185,13 @@
   }
 
   .cards__expander-menu {
+    .btn--circle {
+      --btn-background: transparent;
+
+      block-size: var(--column-width-collapsed);
+      inline-size: var(--column-width-collapsed);
+    }
+
     .panel {
       --panel-padding: 1ch;
     }
diff --git a/app/helpers/cards_helper.rb b/app/helpers/cards_helper.rb
index fd37dafab..dbc7879e5 100644
--- a/app/helpers/cards_helper.rb
+++ b/app/helpers/cards_helper.rb
@@ -71,7 +71,7 @@ module CardsHelper
   end
 
   def cards_expander(title, count)
-    tag.header class: "cards__expander btn btn--plain", data: { action: "click->collapsible-columns#toggle" }, style: "--card-count: #{[ count, 20 ].min}", aria: { role: "button" } do
+    tag.header class: "cards__expander", data: { action: "click->collapsible-columns#toggle" }, style: "--card-count: #{[ count, 20 ].min}", aria: { role: "button" } do
       concat(tag.span count > 99 ? "99+" : count, class: "cards__expander-count")
       concat(tag.h2 title, class: "cards__expander-title")
       concat(tag.div class: "cards__expander-menu position-relative", data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" } do