diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index aed15d90f..832e8c169 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -15,7 +15,7 @@
     --column-width-collapsed: 40px;
     --column-width-expanded: 450px;
     --progress-increment: var(--progress-max-height) / var(--progress-max-cards);
-    --progress-max-cards: 20;
+    --progress-max-cards: 15; /* should match first geared pagination page size */
     --progress-max-height: 50dvh;
 
     container-type: inline-size;
@@ -35,6 +35,7 @@
     }
 
     &:has(.cards) {
+      block-size: 100%;
       min-block-size: 20lh;
     }
 
@@ -148,7 +149,7 @@
     }
 
     .no-transitions & {
-      transition: none;
+      /* transition: none; */
     }
   }
 
@@ -321,7 +322,7 @@
     }
 
     .no-transitions &:after {
-      transition: none;
+      /* transition: none; */
     }
 
     .cards.is-collapsed & {
@@ -344,6 +345,7 @@
 
       &:after {
         block-size: calc(var(--column-width-collapsed) + var(--card-count) * var(--progress-increment));
+        max-block-size: none;
         opacity: 1;
         inline-size: var(--column-width-collapsed);
       }
@@ -756,7 +758,7 @@
     --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-cards: 15; /* should match first geared pagination page size */
     --progress-max-width: 100%;
 
     padding-inline: 3vw;
diff --git a/app/javascript/controllers/collapsible_columns_controller.js b/app/javascript/controllers/collapsible_columns_controller.js
index fb52385a7..2c97fcd09 100644
--- a/app/javascript/controllers/collapsible_columns_controller.js
+++ b/app/javascript/controllers/collapsible_columns_controller.js
@@ -25,7 +25,6 @@ export default class extends Controller {
   }
 
   toggle({ target }) {
-    this.#enableTransitions()
     const column = target.closest('[data-collapsible-columns-target="column"]')
     this.#toggleColumn(column);
   }
@@ -36,14 +35,13 @@ export default class extends Controller {
     }
   }
 
-  async restoreState() {
+  async restoreState(event) {
     await nextFrame()
     await this.#restoreColumnsDisablingTransitions()
   }
 
   focusOnColumn({ target }) {
     if (this.#isCollapsed(target)) {
-      this.#enableTransitions()
       this.#collapseAllExcept(target)
       this.#expand(target)
     }
@@ -54,6 +52,7 @@ export default class extends Controller {
     this.#restoreColumns()
 
     await nextFrame()
+    this.#enableTransitions()
   }
 
   #disableTransitions() {
diff --git a/app/javascript/controllers/css_variable_counter_controller.js b/app/javascript/controllers/css_variable_counter_controller.js
index 41aaec0e0..5b4e9c940 100644
--- a/app/javascript/controllers/css_variable_counter_controller.js
+++ b/app/javascript/controllers/css_variable_counter_controller.js
@@ -5,7 +5,7 @@ export default class extends Controller {
   static targets = [ "item", "counter" ]
   static values = {
     propertyName: String,
-    maxValue: { type: Number, default: 20 }
+    maxValue: { type: Number, default: 15 } // should match first geared pagination page size
   }
 
   initialize() {
diff --git a/app/views/boards/show/_columns.html.erb b/app/views/boards/show/_columns.html.erb
index b3f77a790..bf7a76fcc 100644
--- a/app/views/boards/show/_columns.html.erb
+++ b/app/views/boards/show/_columns.html.erb
@@ -1,4 +1,4 @@
-<%= tag.div class: "card-columns no-transitions hide-scrollbar", data: {
+<%= tag.div class: "card-columns hide-scrollbar", data: {
       controller: "collapsible-columns drag-and-drop drag-and-strum navigable-list card-hotkeys",
       drag_and_drop_dragged_item_class: "drag-and-drop__dragged-item",
       drag_and_drop_hover_container_class: "drag-and-drop__hover-container",
diff --git a/app/views/boards/show/_expander.html.erb b/app/views/boards/show/_expander.html.erb
index d58b68715..c66d12ea3 100644
--- a/app/views/boards/show/_expander.html.erb
+++ b/app/views/boards/show/_expander.html.erb
@@ -1,5 +1,5 @@
 <button class="cards__expander btn btn--plain" data-collapsible-columns-target="button" data-css-variable-counter-target="counter" data-action="click->collapsible-columns#toggle click->navigable-list#selectCurrentOrReset"
-  style="--card-count: <%= [ count, 20 ].min %>" aria-controls="<%= column_id %>" aria-expanded="false">
+  style="--card-count: <%= [ count, 15 ].min %>" aria-controls="<%= column_id %>" aria-expanded="false">
   <span class="cards__expander-count" data-drag-and-drop-counter="true"><%= count > 99 ? "99+" : count %></span>
   <h2 class="cards__expander-title" data-collapsible-columns-target="title">
     <%= title %>
diff --git a/app/views/public/boards/show/_columns.html.erb b/app/views/public/boards/show/_columns.html.erb
index 471816bfe..59f2b5e39 100644
--- a/app/views/public/boards/show/_columns.html.erb
+++ b/app/views/public/boards/show/_columns.html.erb
@@ -1,5 +1,5 @@
 <%= turbo_frame_tag :cards_container do %>
-  <div class="card-columns no-transitions hide-scrollbar"
+  <div class="card-columns hide-scrollbar"
     data-controller="collapsible-columns"
     data-collapsible-columns-board-value="<%= board.id %>"
     data-collapsible-columns-collapsed-class="is-collapsed"