From b70c7e113e37d14017638f3ecc9a7609e6d67b0c Mon Sep 17 00:00:00 2001
From: Tan Ted Hang <219102225+ted0103@users.noreply.github.com>
Date: Mon, 31 Aug 2026 17:06:56 +0800
Subject: [PATCH] Fix trackpad scroll trapping on portfolio rails

---
 scripts/verify.mjs           |  9 +++++++++
 src/styles/store-preview.css | 11 ++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/scripts/verify.mjs b/scripts/verify.mjs
index a62b250..c2b6db6 100644
--- a/scripts/verify.mjs
+++ b/scripts/verify.mjs
@@ -107,6 +107,15 @@ const productionCss = (await Promise.all(css)).join('\n');
 if (productionCss.includes('fonts.googleapis.com') || productionCss.includes('fonts.gstatic.com')) {
   throw new Error('Production CSS must not request third-party fonts');
 }
+if (productionCss.includes('overscroll-behavior-inline:contain')) {
+  throw new Error('Horizontal rails must not trap trackpad scroll chaining');
+}
+if (!productionCss.includes('touch-action:pan-x pan-y pinch-zoom')) {
+  throw new Error('Horizontal rails must explicitly preserve both scroll axes');
+}
+if (!productionCss.includes('@media (hover:hover) and (pointer:fine)') || !productionCss.includes('scroll-snap-type:none')) {
+  throw new Error('Fine-pointer rails must not use scroll snapping');
+}
 
 async function htmlFiles(directory) {
   const files = [];
diff --git a/src/styles/store-preview.css b/src/styles/store-preview.css
index 9bffdb3..6b05064 100644
--- a/src/styles/store-preview.css
+++ b/src/styles/store-preview.css
@@ -171,6 +171,13 @@ html.store-theme body {
 .store-categories::-webkit-scrollbar,
 .store-project-rail::-webkit-scrollbar,
 .store-story-rail::-webkit-scrollbar { display: none; }
+.store-categories,
+.store-home .project-grid,
+.store-project-rail,
+.store-story-rail {
+  overscroll-behavior: auto;
+  touch-action: pan-x pan-y pinch-zoom;
+}
 .store-categories a {
   display: grid;
   justify-items: center;
@@ -236,7 +243,6 @@ html.store-theme body {
   gap: 20px;
   padding: 4px 24px 28px 0;
   overflow-x: auto;
-  overscroll-behavior-inline: contain;
   scroll-snap-type: inline proximity;
   scrollbar-width: none;
 }
@@ -748,6 +754,9 @@ html.store-theme body {
 .store-home a:active { transform: scale(.98); }
 
 @media (hover: hover) and (pointer: fine) {
+  .store-home .project-grid,
+  .store-project-rail,
+  .store-story-rail { scroll-snap-type: none; }
   .store-route-actions a:hover { transform: translateY(-2px); filter: brightness(.97); }
   .store-project-detail .button:hover { transform: translateY(-2px); filter: brightness(.94); }
   .store-contact .contact-action:hover { transform: translateY(-3px); background: white; box-shadow: 0 14px 34px rgba(0, 0, 0, .1); }