From c8c6fbbb1315dbb86bb471e48398b338e5598c08 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 5 Jan 2026 12:49:38 -0600
Subject: [PATCH] Remember expanded state on navigation

---
 app/assets/stylesheets/card-columns.css       |  6 ++---
 .../collapsible_columns_controller.js         | 24 ++++++++++++-------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 09f93de0c..4f1b885b9 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -320,7 +320,6 @@
       display: grid;
       grid-template-areas: "menu expander maximize";
       grid-template-columns: var(--column-width-collapsed) 1fr var(--column-width-collapsed);
-      margin-block-end: calc(0.5 * var(--cards-gap));
       padding-inline: var(--column-padding);
     }
   }
@@ -364,6 +363,7 @@
     font-weight: 600;
     gap: 0.5ch;
     grid-area: expander;
+    outline: none;
     outline-offset: -2px;
     position: relative;
     text-transform: uppercase;
@@ -414,7 +414,7 @@
         block-size: 100%;
         content: "";
         inline-size: 1px;
-        inset: 0 auto;
+        inset-block: calc(var(--column-width-collapsed) + var(--card-count) * var(--progress-increment)) 0;
         position: absolute;
         z-index: -2;
       }
@@ -639,7 +639,7 @@
     text-align: center;
 
     @media (min-width: 800px) {
-      margin-inline: var(--column-padding);
+      margin: var(--column-padding) var(--column-padding) 0;
     }
 
     &:has(dialog[open]) {
diff --git a/app/javascript/controllers/collapsible_columns_controller.js b/app/javascript/controllers/collapsible_columns_controller.js
index 372d0ae14..1a9ba4174 100644
--- a/app/javascript/controllers/collapsible_columns_controller.js
+++ b/app/javascript/controllers/collapsible_columns_controller.js
@@ -103,13 +103,15 @@ export default class extends Controller {
     localStorage.removeItem(key)
   }
 
-  #expand(column) {
-    const key = this.#localStorageKeyFor(column)
-
+  #expand(column, saveState = true) {
     this.#buttonFor(column)?.setAttribute("aria-expanded", "true")
     column.classList.remove(this.collapsedClass)
     column.classList.add(this.expandedClass)
-    localStorage.setItem(key, true)
+
+    if (saveState) {
+      const key = this.#localStorageKeyFor(column)
+      localStorage.setItem(key, true)
+    }
 
     if (window.matchMedia('(max-width: 639px)').matches) {
       column.scrollIntoView({ behavior: "smooth", inline: "center" })
@@ -129,6 +131,7 @@ export default class extends Controller {
   #restoreColumn(column) {
     const key = this.#localStorageKeyFor(column)
     if (localStorage.getItem(key)) {
+      this.#collapseAllExcept(column)
       this.#expand(column)
     }
   }
@@ -165,15 +168,20 @@ export default class extends Controller {
   }
 
   async #handleDesktopMode() {
-    this.#expand(this.maybeColumnTarget)
+    this.#expand(this.maybeColumnTarget, false)
     this.#maybeButton.setAttribute("disabled", true)
   }
 
   #handleMobileMode() {
     this.#maybeButton.removeAttribute("disabled")
-    this.columnTargets.forEach(column => {
-      this.#collapse(column)
-    })
+
+    const expandedColumn = this.columnTargets.find(column => column !== this.maybeColumnTarget && !this.#isCollapsed(column))
+
+    if (expandedColumn) {
+      this.#collapseAllExcept(expandedColumn)
+    } else {
+      this.#collapseAllExcept(this.maybeColumnTarget)
+    }
   }
 
   get #maybeButton() {