From 86b458bad09d45e8a97853c10d84731af5bc4462 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 8 Oct 2025 13:54:24 -0500
Subject: [PATCH] Sorta working x-scroll

---
 app/assets/stylesheets/card-columns.css      | 17 ++++-------
 app/views/collections/show/_columns.html.erb | 30 ++++++++++++++++++++
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index fc80baa05..6e499e518 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -6,12 +6,6 @@
     padding-inline: 0;
   }
 
-  [data-controller="drag-and-drop drag-and-strum"] {
-    background: thistle;
-    max-inline-size: 100vw;
-    overflow-x: auto;
-  }
-
   .card-columns {
     --bubble-size: 3.5rem;
     --cards-gap: min(1.2cqi, 1.7rem);
@@ -24,16 +18,18 @@
     --progress-max-height: 50dvh;
 
     align-items: stretch;
-    background-color: gold;
     container-type: inline-size;
     display: grid;
     gap: var(--column-gap);
-    grid-template-columns: minmax(min-content, 1fr) var(--column-width-expanded) minmax(min-content, 1fr);
-    justify-content: center;
+    grid-template-columns: 1fr var(--column-width-expanded) 1fr;
     margin: var(--cards-gap) auto 0;
-    /* max-inline-size: var(--main-width); */
+    max-inline-size: var(--main-width);
     position: relative;
+    box-shadow: inset 0 0 0 2px red;
+    justify-content: start;
+    overflow-x: auto;
 
+    /* When it has something expanded */
     &:has(.card-columns__left .cards:not(.is-collapsed), .card-columns__right .cards:not(.is-collapsed)) {
       grid-template-columns: auto auto auto;
     }
@@ -52,7 +48,6 @@
     align-items: stretch;
     display: flex;
     gap: var(--column-gap);
-    background: orange;
   }
 
   .card-columns__left {
diff --git a/app/views/collections/show/_columns.html.erb b/app/views/collections/show/_columns.html.erb
index a290cf221..819e3c651 100644
--- a/app/views/collections/show/_columns.html.erb
+++ b/app/views/collections/show/_columns.html.erb
@@ -9,6 +9,36 @@
         drop->drag-and-drop#drop
         dragend->drag-and-drop#dragEnd" } do %>
 
+  <div hidden class="card-cols">
+    <div class="card-cols__left">
+      <div class="card-col is-collapsed">
+        <div class="crd">Not Now</div>
+      </div>
+    </div>
+
+    <div class="card-col is-expanded">
+      <div class="crd">Stream</div>
+    </div>
+
+    <div class="card-cols__right">
+      <div class="card-col is-expanded">
+        <div class="crd">Card</div>
+      </div>
+      <div class="card-col is-collapsed">
+        <div class="crd">Card</div>
+      </div>
+      <div class="card-col is-collapsed">
+        <div class="crd">Card</div>
+      </div>
+      <div class="card-col is-collapsed">
+        <div class="crd">Done</div>
+      </div>
+    </div>
+  </div>
+
+
+
+
   <div class="card-columns" data-controller="collapsible-columns" data-collapsible-columns-collapsed-class="is-collapsed">
     <div class="card-columns__left">
       <%= render "collections/show/not_now", collection: collection %>