From 9f61907eb860bb86deb6351a6f0e23c5f104cd79 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 29 Oct 2025 11:02:47 -0500
Subject: [PATCH] Add bounce to cards

---
 app/assets/stylesheets/card-columns.css              | 3 +++
 app/views/collections/columns/closeds/show.html.erb  | 8 +++++---
 app/views/collections/columns/not_nows/show.html.erb | 8 +++++---
 app/views/collections/columns/show.html.erb          | 8 +++++---
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 012f7faa8..e13ba8b59 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -106,9 +106,12 @@
     margin-block-start: -1ch;
     margin-inline: -1ch;
     overflow: hidden;
+    translate: 0 -1ch;
+    transition: translate 300ms var(--ease-out-overshoot);
 
     .cards:not(.is-collapsed) & {
       padding: 1ch;
+      translate: 0 0;
     }
 
     .card {
diff --git a/app/views/collections/columns/closeds/show.html.erb b/app/views/collections/columns/closeds/show.html.erb
index 06f9b82fc..7ed422c02 100644
--- a/app/views/collections/columns/closeds/show.html.erb
+++ b/app/views/collections/columns/closeds/show.html.erb
@@ -24,9 +24,11 @@
         <%= render "collections/columns/list", cards: @page.records, draggable: true %>
       <% end %>
     <% else %>
-      <div class="card blank-slate blank-slate--card">
-        <p class="txt-align-center">Drag cards here</p>
-        <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
+      <div class="cards__list">
+        <div class="card blank-slate blank-slate--card">
+          <p class="txt-align-center">Drag cards here</p>
+          <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
+        </div>
       </div>
     <% end %>
   <% end %>
diff --git a/app/views/collections/columns/not_nows/show.html.erb b/app/views/collections/columns/not_nows/show.html.erb
index d668934e4..91f899db5 100644
--- a/app/views/collections/columns/not_nows/show.html.erb
+++ b/app/views/collections/columns/not_nows/show.html.erb
@@ -24,9 +24,11 @@
         <%= render "collections/columns/list", cards: @page.records, draggable: true %>
       <% end %>
     <% else %>
-      <div class="card blank-slate blank-slate--card">
-        <p class="txt-align-center">Drag cards here</p>
-        <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
+      <div class="cards__list">
+        <div class="card blank-slate blank-slate--card">
+          <p class="txt-align-center">Drag cards here</p>
+          <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
+        </div>
       </div>
     <% end %>
   <% end %>
diff --git a/app/views/collections/columns/show.html.erb b/app/views/collections/columns/show.html.erb
index b21a9aa87..19123c79f 100644
--- a/app/views/collections/columns/show.html.erb
+++ b/app/views/collections/columns/show.html.erb
@@ -24,9 +24,11 @@
         <%= render "collections/columns/list", cards: @page.records, draggable: true %>
       <% end %>
     <% else %>
-      <div class="card blank-slate blank-slate--card">
-        <p class="txt-align-center">Drag cards here</p>
-        <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
+      <div class="cards__list">
+        <div class="card blank-slate blank-slate--card">
+          <p class="txt-align-center">Drag cards here</p>
+          <p class="txt-align-center blank-slate-for-grid">Nothing here</p>
+        </div>
       </div>
     <% end %>
   <% end %>