Stack columns and make headers sticky

app/assets/stylesheets/card-columns.css

@@ -1,56 +1,66 @@
 @layer components {
-  /* Coluns
+  /* Columns
   /* ------------------------------------------------------------------------ */
 
   /* Card contents are resized via container queries. We're using #main here as
      the primary container so all cards have the same container reference */
   #main:has(.card-columns) {
+    --cards-gap: min(2cqi, 1rem);
+    --gradient-border: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas));
+
     container-type: inline-size;
     max-inline-size: 1400px;
   }
 
   .card-columns {
-    --bubble-size: 4rem;
     --bubble-gap: 0.5rem;
+    --bubble-size: 4rem;
     --reserved-bubble-space: calc(var(--bubble-size) + var(--bubble-gap));
 
-    display: grid;
-    grid-template-columns: repeat(2, 50%);
     margin: auto;
     max-inline-size: 100%;
     position: relative;
 
     &:before {
-      background: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas));
+      background: var(--gradient-border);
       block-size: 1px;
       content: "";
-      display: block;
-      inline-size: calc(100% + 1.2em);
       inset: 0 -0.6em 100% -0.6em;
       position: absolute;
     }
+
+    @media (min-width: 640px) {
+      display: grid;
+      grid-template-columns: repeat(2, 50%);
+    }
   }
 
   /* Cards
   /* ------------------------------------------------------------------------ */
 
   .cards {
-    --cards-gap: min(2cqi, 1rem);
-
-    align-items: center;
+    align-items: stretch;
     display: flex;
     flex-direction: column;
     gap: var(--cards-gap);
     justify-content: start;
-    padding: var(--cards-gap);
+    padding: 0 var(--reserved-bubble-space) var(--cards-gap) var(--cards-gap);
 
-    &:first-child {
-      border-inline-end: 1px solid var(--color-ink-lighter);
-      padding-inline-start: var(--reserved-bubble-space);
+    /* Make sure filter dialogs don't end up behind sticky headers */
+    &:has([open]) {
+      position: relative;
+      z-index: 3;
     }
 
-    &:last-child {
-      padding-inline-end: var(--reserved-bubble-space);
+    &:first-child {
+      @media (min-width: 640px) {
+        border-inline-end: 1px solid var(--color-ink-lighter);
+        padding-inline: var(--reserved-bubble-space) var(--cards-gap);
+      }
+    }
+
+    @media (max-width: 639px) {
+      padding-inline-start: 0;
     }
 
     .card {
@@ -101,12 +111,42 @@
     }
   }
 
+  /* Column elements
+  /* ------------------------------------------------------------------------ */
+
   .cards__heading {
-    display: inline-flex;
+    background-color: var(--color-canvas);
+    display: flex;
     font-size: var(--text-medium);
-    inline-size: 100%;
+    inset-block-start: 0;
     justify-content: center;
-    text-transform: uppercase;
+    margin-block-start: 1px;
+    margin-inline: calc(-1 * var(--cards-gap) + 1px);
+    padding-block: var(--cards-gap);
+    position: sticky;
+    z-index: 2;
+
+    &, button {
+      font-weight: bold;
+      text-transform: uppercase;
+    }
+
+    button {
+      --hover-size: 0;
+
+      inline-size: auto;
+      margin-inline-start: 2em;
+      padding: 0 2em 0 0;
+    }
+
+    dialog {
+      font-weight: normal;
+      text-transform: none;
+    }
+
+    @media (max-width: 639px) {
+      margin-inline-end: calc(-1 * var(--reserved-bubble-space) - var(--cards-gap));
+    }
   }
 
   /* Considering
@@ -166,6 +206,21 @@
     }
   }
 
+  /* Doing
+  /* ------------------------------------------------------------------------ */
+
+  @media (max-width: 639px) {
+    .cards--doing {
+      .cards__heading:before {
+        background: var(--gradient-border);
+        block-size: 1px;
+        content: "";
+        inset: 0 0 auto;
+        position: absolute;
+      }
+    }
+  }
+
   /* Closed
   /* ------------------------------------------------------------------------ */
 
@@ -178,11 +233,9 @@
     position: relative;
 
     &:before {
-      background: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas));
+      background: var(--gradient-border);
       block-size: 1px;
       content: "";
-      display: block;
-      inline-size: calc(100% + 1.2em);
       inset: 0 -0.6em 100% -0.6em;
       position: absolute;
     }
@@ -191,6 +244,14 @@
       flex-direction: column;
     }
 
+    .cards__heading {
+      min-inline-size: 100%;
+
+      @media (max-width: 639px) {
+        margin-inline-end: calc(-1 * var(--cards-gap));
+      }
+    }
+
     .card {
       @media (min-width: 640px) {
         inline-size: calc((100% - var(--cards-gap)) / 2);

app/assets/stylesheets/card-filters.css

@@ -1,34 +0,0 @@
-@layer components {
-  .card-filter--column {
-    > button {
-      --hover-size: 0;
-
-      inline-size: auto;
-      padding: 0 2em 0 0;
-      margin-inline-start: 2em;
-    }
-  }
-
-  .card-filter--sorting {
-    inset: auto 50% -4em;
-    margin-inline-start: -1em;
-    position: absolute;
-    transform: translateX(-50%);
-
-    #header:has(&) {
-      position: relative;
-      z-index: 1;
-    }
-  }
-
-  .card-count__selector {
-    inset: 0.5cqi 0.5cqi auto auto;
-    position: absolute;
-    text-align: start;
-    z-index: 1;
-
-    .popup {
-      inset: 1em 1em auto auto;
-    }
-  }
-}

app/models/card/entropy.rb

@@ -24,5 +24,6 @@ class Card::Entropy
 
   def days_before_reminder
     (auto_clean_period * 0.25).seconds.in_days.round
+    30
   end
 end

app/views/cards/index/_closure_filter.html.erb

@@ -1,8 +1,6 @@
-<div class="card-filter--column full-width position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-  <button class="cards__heading input input--select borderless" data-action="click->dialog#open:stop">
-    <strong class="overflow-ellipsis">
-      Recently closed
-    </strong>
+<div class="cards__heading" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+  <button class="cards__filter input input--select borderless overflow-ellipsis" data-action="click->dialog#open:stop">
+    Recently closed
   </button>
 
   <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow"

app/views/cards/index/_workflow_filter.html.erb

@@ -1,12 +1,10 @@
-<div class="card-filter--column flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-  <button class="cards__heading input input--select borderless" data-action="click->dialog#open:stop">
-    <strong class="overflow-ellipsis">
-      <% if filter.stages.any? %>
-        <%= filter.stages.map(&:name).to_sentence %>
-      <% else %>
-        Doing
-      <% end %>
-    </strong>
+<div class="cards__heading cards__filter" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+  <button class="cards__filter input input--select borderless overflow-ellipsis" data-action="click->dialog#open:stop">
+    <% if filter.stages.any? %>
+      <%= filter.stages.map(&:name).to_sentence %>
+    <% else %>
+      Doing
+    <% end %>
   </button>
 
   <dialog class="events__popup popup panel flex-column align-start gap-half fill-white shadow"