From a3723ef0d2312b3c9b246d39b48605770f1a4ad1 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 15 Dec 2025 16:03:16 -0600
Subject: [PATCH] Cleanup and scroll into view when expanding

---
 app/assets/stylesheets/card-columns.css                   | 8 ++++----
 .../controllers/collapsible_columns_controller.js         | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index f540f3d8e..53257fae1 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -411,7 +411,7 @@
       }
     }
 
-    .cards:not(.is-collapsed) & {
+    .cards.is-expanded & {
       inline-size: 100%;
       justify-content: center;
     }
@@ -421,7 +421,7 @@
     line-height: var(--column-width-collapsed);
     inline-size: var(--column-width-collapsed);
 
-    .cards:not(.is-collapsed) & {
+    .cards.is-expanded & {
       display: none;
     }
   }
@@ -439,7 +439,7 @@
       writing-mode: vertical-rl;
     }
 
-    .cards:not(.is-collapsed) & {
+    .cards.is-expanded & {
       align-items: center;
       display: flex;
       gap: 0.25ch;
@@ -458,7 +458,7 @@
         display: none;
       }
 
-      .cards:not(.is-collapsed) .cards__expander:hover & {
+      .cards.is-expanded .cards__expander:hover & {
         opacity: 0.66;
         scale: 1;
       }
diff --git a/app/javascript/controllers/collapsible_columns_controller.js b/app/javascript/controllers/collapsible_columns_controller.js
index e9974b0ce..806e70c76 100644
--- a/app/javascript/controllers/collapsible_columns_controller.js
+++ b/app/javascript/controllers/collapsible_columns_controller.js
@@ -110,6 +110,10 @@ export default class extends Controller {
     column.classList.remove(this.collapsedClass)
     column.classList.add(this.expandedClass)
     localStorage.setItem(key, true)
+
+    if (window.matchMedia('(max-width: 639px)').matches) {
+      column.scrollIntoView({ behavior: "smooth", inline: "nearest" })
+    }
   }
 
   #buttonFor(column) {