Correct padding

app/assets/stylesheets/card-columns.css

@@ -36,7 +36,7 @@
     --bubble-size: 3.5rem;
     --cards-gap: min(1.2cqi, 1.7rem);
     --column-gap: 8px;
-    --column-padding-expanded: calc(var(--column-gap) * 2);
+    --column-padding: calc(var(--column-gap) * 2);
     --column-transition-duration: 300ms;
     --column-width-collapsed: 40px;
     --column-width-expanded: 450px;
@@ -70,7 +70,6 @@
     }
 
     @media (max-width: 639px) {
-      --column-padding-expanded: 0px;
       --column-width-expanded: calc(100vw - var(--column-gap) * 4);
 
       scroll-snap-type: inline mandatory;
@@ -118,8 +117,7 @@
     scroll-snap-align: start;
 
     @media (max-width: 639px) {
-      overflow-x: hidden;
-      overflow-y: auto;
+      overflow: hidden;
       scroll-snap-align: center;
     }
 
@@ -182,10 +180,6 @@
       translate: 0 var(--column-width-collapsed);
     }
 
-    .cards:not(.is-collapsed) & {
-      padding-inline: var(--column-padding-expanded);
-    }
-
     .drag-and-drop__hover-container & {
       --dnd-bg-color: var(--column-color);
       --dnd-border-color: var(--card-color);
@@ -200,6 +194,14 @@
     .no-transitions & {
       transition: none;
     }
+
+    /* Use flex so the __list container can take up the remaining space for scrolling */
+    @media (max-width: 639px) {
+      .is-expanded & {
+        display: flex;
+        flex-direction: column;
+      }
+    }
   }
 
   /* The wrapper around the cards used to clip overflow while transitioning.
@@ -208,17 +210,16 @@
     display: flex;
     flex-direction: column;
     gap: var(--cards-gap);
-    margin-block-start: -1ch;
-    margin-inline: -1ch;
-    overflow: hidden;
+    overflow-x: hidden;
     overflow-y: auto;
 
-    .cards:not(.is-collapsed) & {
-      padding: 1ch;
-    }
+    .is-expanded & {
+      padding: var(--column-padding);
 
-    .card {
-      inline-size: calc(var(--column-width-expanded) - var(--column-padding-expanded) * 2);
+      /* Use the rest of the column height for scrolling */
+      @media (max-width: 639px) {
+        flex: 1;
+      }
     }
 
     .cards--grid & {
@@ -294,11 +295,12 @@
       block-size: 100%;
     }
 
-    .cards:not(.is-collapsed) & {
+    .cards.is-expanded & {
       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);
     }
   }
 
@@ -457,44 +459,6 @@
     }
   }
 
-  /* TODO: I think this is legacy now? */
-  .cards__heading {
-    display: flex;
-    font-size: var(--text-medium);
-    inset-block-start: 0;
-    justify-content: center;
-    margin-block-start: 1px;
-    margin-inline: -8px; /* enough to cover card shadows, but avoid overlapping bubbles */
-    padding-block: var(--cards-gap) 0;
-    position: sticky;
-    z-index: 3;
-
-    /* Cover bubbles and cards on small viewports */
-    @media (max-width: 639px) {
-      margin-inline: calc(-1 * var(--cards-gap) - var(--main-padding));
-    }
-
-    &, .cards__filter {
-      font-weight: bold;
-      text-transform: uppercase;
-    }
-
-    .cards__filter {
-      --filter-block-padding: 0.5rem;
-
-      background-color: var(--color-canvas);
-      border-radius: 99rem;
-      inline-size: auto;
-      margin-block: calc(-1 * var(--filter-block-padding));
-      padding-block: var(--filter-block-padding);
-    }
-
-    dialog {
-      font-weight: normal;
-      text-transform: none;
-    }
-  }
-
   /* Override card styles within columns
   /* ------------------------------------------------------------------------ */
 
@@ -629,7 +593,8 @@
     --card-padding-block: var(--block-space);
 
     border: 1px solid var(--border-color);
-    margin-block-end: var(--cards-gap);
+    inline-size: auto;
+    margin-inline: var(--column-padding);
     text-align: center;
 
     &:has(dialog[open]) {
@@ -781,54 +746,4 @@
       }
     }
   }
-
-  /* Mobile columns
-  /* -------------------------------------------------------------------------- */
-
-  .mobile-card-columns {
-    --column-gap: 8px;
-    --column-padding-expanded: calc(var(--column-gap) * 2);
-    --column-width-collapsed: 40px;
-    --progress-increment: var(--progress-max-width) / var(--progress-max-cards);
-    --progress-max-cards: 20;
-    --progress-max-width: 100%;
-
-    padding-inline: 3vw;
-
-    /* Hide on larger devices with cursors */
-    @media (min-width: 520px) {
-      display: none;
-    }
-
-    .cards.is-collapsed {
-      inline-size: auto;
-      display: block;
-      padding-block: 0.5ch;
-
-      .cards__expander {
-        --gradient-direction: to right;
-
-        flex-direction: row;
-        inline-size: auto;
-
-        &:before {
-          block-size: 1px;
-          inline-size: 100%;
-          inset: 50% 0 auto;
-          translate: 0 -50%;
-        }
-
-        &:after {
-          block-size: var(--column-width-collapsed);
-          inline-size: calc(var(--column-width-collapsed) + var(--card-count) * var(--progress-increment));
-          margin-inline-start: 0;
-          max-inline-size: var(--progress-max-width);
-        }
-      }
-
-      .cards__expander-title {
-        writing-mode: revert;
-      }
-    }
-  }
 }

app/assets/stylesheets/drag_and_drop.css

@@ -15,9 +15,5 @@
     outline-offset: -2px;
     transition: background-color 200ms;
     z-index: 1;
-
-    .cards__heading {
-      background-color: transparent;
-    }
   }
 }