From 357b27c91454ec50f55bf378c59e17ea30a02c5b Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 19 Sep 2025 10:25:57 -0500
Subject: [PATCH] Fit column content, cap counts

---
 app/assets/stylesheets/card-columns.css       | 52 +++++++++++--------
 .../cards/index/engagement/_closed.html.erb   |  4 +-
 .../cards/index/engagement/_doing.html.erb    |  2 +-
 .../cards/index/engagement/_on_deck.html.erb  |  4 +-
 4 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 298e2b11c..d67ac6e73 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -5,7 +5,7 @@
   /* Card contents are resized via container queries. We're using #main here as
      the primary container so all cards have the same container reference */
   #main:has(.card-columns) {
-    --cards-gap: min(1.5cqi, 1.5rem);
+    --cards-gap: min(1.7cqi, 1.7rem);
     --gradient-border: linear-gradient(to right,var(--color-canvas), var(--color-ink) 3%, var(--color-ink) 97%, var(--color-canvas));
     --reserved-bubble-space: 0;
     --bubble-gap: 0.5rem;
@@ -135,9 +135,11 @@
     }
 
     .progress {
+      --max-height: 360px;
+
       background-color: color-mix(in srgb, var(--card-color) 30%, var(--color-canvas));
       border-radius: 0.2em;
-      inline-size: calc(var(--collapsed) + calc(var(--cards-gap) / 2));
+      inline-size: var(--collapsed);
       margin-block-start: 2.5em;
       position: absolute;
       z-index: -1;
@@ -147,32 +149,35 @@
       }
     }
     
-    .progress-1 { block-size: 5%; }
-    .progress-2 { block-size: 10%; }
-    .progress-3 { block-size: 15%; }
-    .progress-4 { block-size: 20%; }
-    .progress-5 { block-size: 25%; }
-    .progress-6 { block-size: 30%; }
-    .progress-7 { block-size: 35%; }
-    .progress-8 { block-size: 40%; }
-    .progress-9 { block-size: 45%; }
-    .progress-10 { block-size: 50%; }
-    .progress-11 { block-size: 55%; }
-    .progress-12 { block-size: 60%; }
-    .progress-13 { block-size: 65%; }
-    .progress-14 { block-size: 70%; }
-    .progress-15 { block-size: 75%; }
-    .progress-16 { block-size: 80%; }
-    .progress-17 { block-size: 85%; }
-    .progress-18 { block-size: 90%; }
-    .progress-19 { block-size: 95%; }
-    .progress-20 { block-size: 100%; }
+    .progress-1 { block-size: calc(var(--max-height) * 0.05); }
+    .progress-2 { block-size: calc(var(--max-height) * 0.10); }
+    .progress-3 { block-size: calc(var(--max-height) * 0.15); }
+    .progress-4 { block-size: calc(var(--max-height) * 0.20); }
+    .progress-5 { block-size: calc(var(--max-height) * 0.25); }
+    .progress-6 { block-size: calc(var(--max-height) * 0.30); }
+    .progress-7 { block-size: calc(var(--max-height) * 0.35); }
+    .progress-8 { block-size: calc(var(--max-height) * 0.40); }
+    .progress-9 { block-size: calc(var(--max-height) * 0.45); }
+    .progress-10 { block-size: calc(var(--max-height) * 0.50); }
+    .progress-11 { block-size: calc(var(--max-height) * 0.55); }
+    .progress-12 { block-size: calc(var(--max-height) * 0.60); }
+    .progress-13 { block-size: calc(var(--max-height) * 0.65); }
+    .progress-14 { block-size: calc(var(--max-height) * 0.70); }
+    .progress-15 { block-size: calc(var(--max-height) * 0.75); }
+    .progress-16 { block-size: calc(var(--max-height) * 0.80); }
+    .progress-17 { block-size: calc(var(--max-height) * 0.85); }
+    .progress-18 { block-size: calc(var(--max-height) * 0.90); }
+    .progress-19 { block-size: calc(var(--max-height) * 0.95); }
+    .progress-20 { block-size: calc(var(--max-height) * 1.00); }
 
     .cards__expander-count {
       background-color: color-mix(in srgb, var(--card-color) 30%, var(--color-canvas));
+      block-size: var(--collapsed);
       border-radius: 0.2em;
       display: none;
-      padding: 0.5em 1em;
+      font-size: var(--text-x-small);
+      inline-size: var(--collapsed);
+      line-height: var(--collapsed);
 
       .cards.is-collapsed & {
         display: initial;
@@ -474,6 +479,7 @@
 
   .cards--closed {
     margin-block: var(--cards-gap);
+    margin-inline-start: var(--cards-gap);
 
     @media (min-width: 640px) {
       padding-inline: var(--cards-gap);
diff --git a/app/views/cards/index/engagement/_closed.html.erb b/app/views/cards/index/engagement/_closed.html.erb
index f406f7b1d..89a773af8 100644
--- a/app/views/cards/index/engagement/_closed.html.erb
+++ b/app/views/cards/index/engagement/_closed.html.erb
@@ -1,7 +1,7 @@
-<section id="closed-cards" class="cards cards--closed is-collapsed" style="--card-color: var(--color-black);"
+<section id="closed-cards" class="cards cards--closed is-collapsed" style="--card-color: var(--color-ink-light);"
     data-controller="toggle-class" data-toggle-class-toggle-class="is-collapsed">
   <div class="cards__expander btn btn--plain" data-action="click->toggle-class#toggle">
-    <strong class="font-weight-black cards__expander-count"><%= page.records.count %></strong>
+    <strong class="font-weight-black cards__expander-count"><%= page.records.count > 99 ? "99+" : page.records.count %></strong>
     <button class="btn btn--plain cards__expander-button txt-uppercase">Done</button>
     <div class="progress progress-<%= [page.records.count, 20].min %>"></div>
   </div>
diff --git a/app/views/cards/index/engagement/_doing.html.erb b/app/views/cards/index/engagement/_doing.html.erb
index 56b68b085..f40a32cc2 100644
--- a/app/views/cards/index/engagement/_doing.html.erb
+++ b/app/views/cards/index/engagement/_doing.html.erb
@@ -12,7 +12,7 @@
   %>
 
   <div class="cards__expander btn btn--plain" data-action="click->toggle-class#toggle">
-    <strong class="font-weight-black cards__expander-count"><%= filtered_records.count %></strong>
+    <strong class="font-weight-black cards__expander-count"><%= filtered_records.count > 99 ? "99+" : filtered_records.count %></strong>
     <button class="btn btn--plain cards__expander-button txt-uppercase"><%= stage.name if defined?(stage) && stage %></button>
     <div class="progress progress-<%= [filtered_records.count, 20].min %>"></div>
   </div>
diff --git a/app/views/cards/index/engagement/_on_deck.html.erb b/app/views/cards/index/engagement/_on_deck.html.erb
index c1b1aba90..c3b439b80 100644
--- a/app/views/cards/index/engagement/_on_deck.html.erb
+++ b/app/views/cards/index/engagement/_on_deck.html.erb
@@ -1,10 +1,10 @@
-<section id="on-deck-cards" class="cards cards--on-deck is-collapsed" style="--card-color: var(--color-black);"
+<section id="on-deck-cards" class="cards cards--on-deck is-collapsed" style="--card-color: var(--color-ink-light);"
     data-controller="toggle-class" 
     data-toggle-class-toggle-class="is-collapsed"
     data-drag-and-drop-target="container"
     data-drop-target="on_deck">
   <div class="cards__expander btn btn--plain" data-action="click->toggle-class#toggle">
-    <strong class="font-weight-black cards__expander-count"><%= page.records.count %></strong>
+    <strong class="font-weight-black cards__expander-count"><%= page.records.count > 99 ? "99+" : page.records.count %></strong>
     <button class="btn btn--plain cards__expander-button txt-uppercase">Not Now</button>
     <div class="progress progress-<%= [page.records.count, 20].min %>"></div>
   </div>