From 7787bdde3592eaf5060604c4e06ea795429d1998 Mon Sep 17 00:00:00 2001
From: coasting24 <55407157+coasting24@users.noreply.github.com>
Date: Fri, 6 Nov 2026 07:43:58 +0100
Subject: [PATCH] Card shadows no longer cut off below the card row

The strip is a scroll container (overflow-x: auto), which clips both axes, and
its 6px padding cut the cards' 0 12px 32px shadow off in a hard line just
below the cards. It now has room above (26px, for the 3px hover lift too) and
below (48px); the extra is taken off its bottom offset, so the cards sit
exactly where they were. The strip lets clicks through, only the cards catch
them, so nothing under the extra room loses its clicks. Phone layout unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/styles.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/styles.js b/src/styles.js
index 9e8c0bd..2428ae4 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -167,7 +167,11 @@ export const styles = css`
   @media (max-width:1100px){ .wx .wbar{display:none} }
 
   /* ===== card strip ===== */
-  .strip{position:absolute;left:var(--pad);right:0;bottom:85px;display:flex;gap:var(--card-gap);overflow-x:auto;scroll-snap-type:none;scrollbar-width:none;padding:6px 0}
+  /* room above and below the cards for their drop shadow (0 12px 32px, plus the 3px hover lift): a scroll container clips
+     both axes, so 6px cut the shadow off. The extra padding is taken off "bottom", so the cards stay where they were; the
+     strip itself lets clicks through, only the cards catch them */
+  .strip{position:absolute;left:var(--pad);right:0;bottom:calc(85px - 42px);display:flex;gap:var(--card-gap);overflow-x:auto;scroll-snap-type:none;scrollbar-width:none;padding:26px 0 48px;pointer-events:none}
+  .strip>*{pointer-events:auto}
   @media (pointer:coarse){ .strip{scroll-snap-type:x proximity} }
   .strip::-webkit-scrollbar{display:none}
   /* soft shadows on the row's edges: right always, left once scrolled */
@@ -747,7 +751,7 @@ export const styles = css`
     .wx .t sup{font-size:16px;line-height:1.4}
     .wx .cnd{margin:0}
     .wx .hl{margin-top:2px}
-    .strip{position:static;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:6px;padding:4px var(--pad) calc(90px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));scroll-snap-type:none;scrollbar-width:none}
+    .strip{position:static;pointer-events:auto;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:6px;padding:4px var(--pad) calc(90px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));scroll-snap-type:none;scrollbar-width:none}
     .strip::after{display:none}
     .etools{position:static;padding:8px var(--pad) 6px;flex:none}
     .etools button{height:34px;padding:0 14px 0 10px;font-size:10px}