Merge pull request #1268 from basecamp/mobile-columns

Mobile columns

app/assets/stylesheets/card-columns.css

@@ -2,7 +2,7 @@
   /* Column container
   /* ------------------------------------------------------------------------ */
 
-  .card-columns {
+  #main:has(.card-columns) {
     --bubble-size: 3.5rem;
     --cards-gap: min(1.2cqi, 1.7rem);
     --column-gap: 8px;
@@ -13,18 +13,22 @@
     --progress-max-cards: 20;
     --progress-max-height: 50dvh;
 
-    align-items: stretch;
+    padding-inline: var(--column-gap);
+  }
+
+  .card-columns {
     container-type: inline-size;
     display: grid;
     gap: var(--column-gap);
     grid-template-columns: 1fr var(--column-width-expanded) 1fr;
-    justify-content: center;
-    margin: var(--cards-gap) auto 0;
+    margin-inline: auto;
     max-inline-size: var(--main-width);
+    overflow-x: auto;
     position: relative;
 
+    /* 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;
+      grid-template-columns: auto var(--column-width-expanded) auto;
     }
 
     &:has(.cards) {

app/views/collections/show/_columns.html.erb

@@ -8,7 +8,6 @@
         dragenter->drag-and-strum#dragEnter
         drop->drag-and-drop#drop
         dragend->drag-and-drop#dragEnd" } do %>
-
   <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 %>