Expand columns exclusively

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]) {

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)
+    }
+  }
+}

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 %>
 

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>

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>

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>