From f4540467c292630d3f5669d41e2452c8892deb9f Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 13 Nov 2025 11:38:22 -0600
Subject: [PATCH] L/R gradient direction for columns on mobile

---
 app/assets/stylesheets/card-columns.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 083a4da6a..da9b9b15c 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -271,6 +271,8 @@
   }
 
   .cards__expander {
+    --gradient-direction: to bottom;
+
     align-items: center;
     border-radius: 99rem;
     cursor: pointer;
@@ -292,7 +294,7 @@
 
     /* Progress */
     &:after {
-      background: linear-gradient(to bottom, var(--card-color), var(--column-color) 80%);
+      background: linear-gradient(var(--gradient-direction), var(--card-color), var(--column-color) 80%);
       block-size: var(--column-width-collapsed);
       border-radius: 99rem;
       content: "";
@@ -756,6 +758,8 @@
       padding-block: 0.5ch;
 
       .cards__expander {
+        --gradient-direction: to right;
+
         flex-direction: row;
         inline-size: auto;