Sorta working x-scroll

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 {

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