diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 15e8f03b0..c2ddc7389 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -1,66 +1,73 @@
 @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));
+    --reserved-bubble-space: calc(var(--bubble-size) + var(--bubble-gap));
+    --bubble-gap: 0.5rem;
+    --bubble-size: 4rem;
+
     container-type: inline-size;
     max-inline-size: 1400px;
+
+    @media (max-width: 639px) {
+      --bubble-gap: -0.5rem;
+      --bubble-size: 3rem;
+      --reserved-bubble-space: calc(var(--bubble-size) / 2 + var(--bubble-gap));
+    }
   }
 
   .card-columns {
-    --bubble-size: 4rem;
-    --bubble-gap: 0.5rem;
-
-    display: grid;
-    grid-template-columns: repeat(2, 50%);
     margin: auto;
-    max-inline-size: calc(100% - (var(--bubble-size) + var(--bubble-gap)) * 2);
+    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;
     }
 
-    .cards:first-child {
-      padding-inline-end: var(--cards-gap);
-      position: relative;
-
-      &:after {
-        background: linear-gradient(var(--color-canvas), var(--color-ink-lighter) 1%, var(--color-ink-lighter) 99%, var(--color-canvas));
-        block-size: calc(100% + 1.2em);
-        content: "";
-        display: block;
-        inline-size: 1px;
-        inset: -0.6em 0 -0.6em 100%;
-        position: absolute;
-      }
-    }
-
-    .cards:last-child {
-      padding-inline-start: var(--cards-gap);
+    @media (min-width: 640px) {
+      display: grid;
+      grid-template-columns: repeat(2, 50%);
     }
   }
 
   /* Cards
-  /* -------------------------------------------------------------------------- */
+  /* ------------------------------------------------------------------------ */
 
   .cards {
-    --cards-gap: 2cqi;
-
-    align-items: center;
+    align-items: stretch;
     display: flex;
     flex-direction: column;
     gap: var(--cards-gap);
     justify-content: start;
-    padding-block: calc(var(--cards-gap) * 0.75);
+    padding: 0 var(--reserved-bubble-space) var(--cards-gap) var(--cards-gap);
+    position: relative;
+
+    /* Make sure filter dialogs don't end up behind sticky headers */
+    &:has([open]) {
+      z-index: 3;
+    }
+
+    &: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-block-end: calc(var(--cards-gap) * 2);
+      padding-inline-start: var(--reserved-bubble-space);
+    }
 
     .card {
       --block-space: 1em;
@@ -90,7 +97,7 @@
         .workflow-stage:not(.workflow-stage--current) {
           opacity: 0;
           transition: opacity 0.2s ease-in-out;
-        
+
           @media (any-hover: hover) {
             .card:hover & {
               opacity: 1;
@@ -98,7 +105,7 @@
           }
         }
       }
-  
+
       @media (any-hover: hover) {
         .card:hover & {
           img:not([src=""]) {
@@ -110,12 +117,38 @@
     }
   }
 
+  /* 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;
+    }
   }
 
   /* Considering
@@ -175,8 +208,21 @@
     }
   }
 
+  /* Doing
+  /* ------------------------------------------------------------------------ */
+
+  @media (max-width: 639px) {
+    .cards--doing:before {
+      background: var(--gradient-border);
+      block-size: 1px;
+      content: "";
+      inset: 0 0 auto;
+      position: absolute;
+    }
+  }
+
   /* Closed
-  /* -------------------------------------------------------------------------- */
+  /* ------------------------------------------------------------------------ */
 
   .cards--closed {
     justify-content: center;
@@ -187,22 +233,35 @@
     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;
     }
 
-    .card {
-      inline-size: calc((100% - var(--cards-gap) * 2) / 3);
+    @media (max-width: 639px) {
+      flex-direction: column;
+      padding-inline: var(--reserved-bubble-space);
+    }
 
-      @media (max-width: 960px) {
+    .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);
       }
 
+      @media (min-width: 960px) {
+        inline-size: calc((100% - var(--cards-gap) * 2) / 3);
+      }
+
       &:nth-of-type(7) {
         margin-block-start: var(--cards-gap);
       }
diff --git a/app/assets/stylesheets/card-filters.css b/app/assets/stylesheets/card-filters.css
deleted file mode 100644
index f7ea3605c..000000000
--- a/app/assets/stylesheets/card-filters.css
+++ /dev/null
@@ -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;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 892de566d..3e2263d6c 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -66,7 +66,9 @@
     gap: var(--inline-space-half);
     margin-block-start: calc(-1 * var(--card-padding-block));
     margin-inline-start: calc(-1 * var(--card-padding-inline));
+    max-inline-size: 100%;
     min-inline-size: 0;
+    overflow: hidden;
   }
 
   .card__collection {
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index 4590b5e99..40f34c9ed 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -1,7 +1,7 @@
 <% cache cacheable_preview_parts_for(card) do %>
   <%= card_article_tag card, class: "card" do %>
     <div class="flex gap">
-      <div class="flex flex-column flex-item-grow">
+      <div class="flex flex-column flex-item-grow max-inline-size">
         <header class="card__header">
           <%= render "cards/display/preview/collection", card: card %>
           <%= render "cards/display/preview/tags", card: card %>
diff --git a/app/views/cards/index/_closure_filter.html.erb b/app/views/cards/index/_closure_filter.html.erb
index 120519c2f..7615725be 100644
--- a/app/views/cards/index/_closure_filter.html.erb
+++ b/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"
diff --git a/app/views/cards/index/_workflow_filter.html.erb b/app/views/cards/index/_workflow_filter.html.erb
index 3a890907d..a1b836817 100644
--- a/app/views/cards/index/_workflow_filter.html.erb
+++ b/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"