From 03ad5f26db7f4a4befa3cea81d67e5927a40f78b Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 19 Sep 2025 10:49:47 -0500
Subject: [PATCH] Expand columns exclusively

---
 app/assets/stylesheets/card-columns.css       |  8 +++----
 .../collapsible_columns_controller.js         | 22 +++++++++++++++++++
 app/views/cards/index/_columns.html.erb       |  2 +-
 .../cards/index/engagement/_closed.html.erb   |  4 ++--
 .../cards/index/engagement/_doing.html.erb    |  5 ++---
 .../cards/index/engagement/_on_deck.html.erb  |  5 ++---
 6 files changed, 33 insertions(+), 13 deletions(-)
 create mode 100644 app/javascript/controllers/collapsible_columns_controller.js

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index d67ac6e73..ed14b6339 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -62,15 +62,15 @@
   .cards {
     align-items: stretch;
     display: flex;
+    flex: 1 0 var(--expanded-min);
     flex-direction: column;
     gap: var(--cards-gap);
     justify-content: start;
+    max-inline-size: var(--expanded-min);
+    min-inline-size: var(--expanded-min);
     position: relative;
     scroll-snap-align: start;
-    flex: 1 0 var(--expanded-min);
-    min-width: var(--expanded-min);
-    max-width: var(--expanded-min);
-    transition: all 300ms ease;
+    transition: inline-size 300ms ease;
 
     /* Make sure filter dialogs don't end up behind sticky headers */
     &:has([open]) {
diff --git a/app/javascript/controllers/collapsible_columns_controller.js b/app/javascript/controllers/collapsible_columns_controller.js
new file mode 100644
index 000000000..fbb8b97bb
--- /dev/null
+++ b/app/javascript/controllers/collapsible_columns_controller.js
@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static classes = [ "collapsed" ]
+  static targets = [ "column" ]
+
+  toggle(event) {
+    const clickedColumn = event.target.closest('[data-collapsible-columns-target="column"]')
+
+    if (!clickedColumn) return
+
+    const isCurrentlyCollapsed = clickedColumn.classList.contains(this.collapsedClass)
+
+    this.columnTargets.forEach(column => {
+      column.classList.add(this.collapsedClass)
+    })
+
+    if (isCurrentlyCollapsed) {
+      clickedColumn.classList.remove(this.collapsedClass)
+    }
+  }
+}
diff --git a/app/views/cards/index/_columns.html.erb b/app/views/cards/index/_columns.html.erb
index dbf60de29..c382a2383 100644
--- a/app/views/cards/index/_columns.html.erb
+++ b/app/views/cards/index/_columns.html.erb
@@ -1,6 +1,6 @@
 <% cache @cache_key do %>
   <%= turbo_frame_tag :card_columns do %>
-    <div class="card-columns">
+    <div class="card-columns" data-controller="collapsible-columns" data-collapsible-columns-collapsed-class="is-collapsed">
       <%= render "cards/index/engagement/on_deck", user_filtering: user_filtering, **on_deck.to_h %>
       <%= render "cards/index/engagement/considering", user_filtering: user_filtering, **considering.to_h %>
 
diff --git a/app/views/cards/index/engagement/_closed.html.erb b/app/views/cards/index/engagement/_closed.html.erb
index 89a773af8..dca8fc3db 100644
--- a/app/views/cards/index/engagement/_closed.html.erb
+++ b/app/views/cards/index/engagement/_closed.html.erb
@@ -1,6 +1,6 @@
 <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">
+    data-collapsible-columns-target="column">
+  <div class="cards__expander btn btn--plain" data-action="click->collapsible-columns#toggle">
     <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>
diff --git a/app/views/cards/index/engagement/_doing.html.erb b/app/views/cards/index/engagement/_doing.html.erb
index f40a32cc2..e29b412f5 100644
--- a/app/views/cards/index/engagement/_doing.html.erb
+++ b/app/views/cards/index/engagement/_doing.html.erb
@@ -1,6 +1,5 @@
 <section id="doing-cards" class="cards cards--doing is-collapsed" style="--card-color: <%= stage.color if defined?(stage) && stage %>"
-    data-controller="toggle-class" 
-    data-toggle-class-toggle-class="is-collapsed"
+    data-collapsible-columns-target="column"
     data-drag-and-drop-target="container"
     data-drop-target="doing">
   <% 
@@ -11,7 +10,7 @@
     end
   %>
 
-  <div class="cards__expander btn btn--plain" data-action="click->toggle-class#toggle">
+  <div class="cards__expander btn btn--plain" data-action="click->collapsible-columns#toggle">
     <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>
diff --git a/app/views/cards/index/engagement/_on_deck.html.erb b/app/views/cards/index/engagement/_on_deck.html.erb
index c3b439b80..8a4c10634 100644
--- a/app/views/cards/index/engagement/_on_deck.html.erb
+++ b/app/views/cards/index/engagement/_on_deck.html.erb
@@ -1,9 +1,8 @@
 <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-collapsible-columns-target="column"
     data-drag-and-drop-target="container"
     data-drop-target="on_deck">
-  <div class="cards__expander btn btn--plain" data-action="click->toggle-class#toggle">
+  <div class="cards__expander btn btn--plain" data-action="click->collapsible-columns#toggle">
     <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>