From bcc646e421ec9c94f2e1810304194c928d9dd6cd Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 6 Nov 2025 15:49:50 -0600
Subject: [PATCH] Nicer column x-scrolling and hover states

---
 app/assets/stylesheets/card-columns.css | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 7800826bf..e0d93c631 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -3,6 +3,10 @@
   /* ------------------------------------------------------------------------ */
 
   #main:has(.card-columns) {
+    --main-padding: 0;
+  }
+
+  .card-columns {
     --bubble-size: 3.5rem;
     --cards-gap: min(1.2cqi, 1.7rem);
     --column-gap: 8px;
@@ -14,10 +18,7 @@
     --progress-max-cards: 20;
     --progress-max-height: 50dvh;
 
-    padding-inline: var(--column-gap);
-  }
-
-  .card-columns {
+    -ms-overflow-style: none;  /* Hide x-scrollbar on Edge */
     container-type: inline-size;
     display: grid;
     gap: var(--column-gap);
@@ -26,7 +27,14 @@
     max-inline-size: var(--main-width);
     overflow-x: auto;
     overflow-y: hidden;
+    padding-block-end: var(--column-width-collapsed);
     position: relative;
+    scrollbar-width: none; /* Hide x-scrollbar on FF */
+
+    /* Hide x-scrollbar on Chrome/Safari/Opera */
+    &::-webkit-scrollbar {
+      display: none;
+    }
 
     /* When it has something expanded */
     &:has(.card-columns__left .cards:not(.is-collapsed), .card-columns__right .cards:not(.is-collapsed)) {
@@ -51,10 +59,12 @@
 
   .card-columns__left {
     justify-content: end;
+    padding-inline-start: var(--column-gap);
   }
 
   .card-columns__right {
     justify-content: start;
+    padding-inline-end: var(--column-gap);
   }
 
   /* Column