From 0cd1292ca28c2da6e972a8216e1f4c4ed50a5c04 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 3 Jun 2026 21:36:25 +0000
Subject: [PATCH] fix(web): enable vertical touch scrolling on tables

The task/patient table containers used the class `touch-pan-x`, which
collides with Tailwind's built-in utility that emits `touch-action: pan-x`.
On touch devices this makes the browser treat the table region as
horizontal-only, swallowing vertical scroll gestures so the surrounding
page could not be scrolled vertically by touch.

Rename the custom momentum-scrolling utility to `hw-touch-scroll` (which
only sets `-webkit-overflow-scrolling: touch`) so `touch-action` stays at
its default `auto`, allowing both horizontal table scrolling and vertical
page scrolling via touch.
---
 web/components/tables/PatientList.tsx |  2 +-
 web/components/tables/TaskList.tsx    |  2 +-
 web/globals.css                       | 10 +++++++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/components/tables/PatientList.tsx b/web/components/tables/PatientList.tsx
index eeb1f3f8..a2463757 100644
--- a/web/components/tables/PatientList.tsx
+++ b/web/components/tables/PatientList.tsx
@@ -1156,7 +1156,7 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({ initi
             </div>
           )}
           <div className={clsx(listLayout === 'table' ? 'block' : 'hidden print:block')}>
-            <TableDisplay className="print-content hw-autosize-table overflow-x-auto touch-pan-x"/>
+            <TableDisplay className="print-content hw-autosize-table overflow-x-auto hw-touch-scroll"/>
           </div>
           {listLayout === 'card' && (
             <div className="flex flex-col gap-3 w-full print:hidden">
diff --git a/web/components/tables/TaskList.tsx b/web/components/tables/TaskList.tsx
index fc7da8fa..3cfcd3e6 100644
--- a/web/components/tables/TaskList.tsx
+++ b/web/components/tables/TaskList.tsx
@@ -1075,7 +1075,7 @@ export const TaskList = forwardRef<TaskListRef, TaskListProps>(({ tasks: initial
           `}</style>
             )}
             <div className={clsx('w-full', listLayout === 'table' ? 'block' : 'hidden print:block')}>
-              <TableDisplay className="print-content hw-autosize-table w-full overflow-x-auto touch-pan-x"/>
+              <TableDisplay className="print-content hw-autosize-table w-full overflow-x-auto hw-touch-scroll"/>
             </div>
             {listLayout === 'card' && (
               <div className="flex flex-col gap-3 w-full print:hidden">
diff --git a/web/globals.css b/web/globals.css
index 1d8e81f0..07f0c56e 100644
--- a/web/globals.css
+++ b/web/globals.css
@@ -15,7 +15,15 @@
 }
 
 @layer utilities {
-  .touch-pan-x {
+  /*
+   * Enables momentum scrolling for overflow containers (e.g. horizontally
+   * scrollable tables) without constraining `touch-action`. We intentionally
+   * avoid Tailwind's `touch-pan-x` utility here: that sets
+   * `touch-action: pan-x`, which makes the browser treat the element as
+   * horizontal-only and swallows vertical scroll gestures, breaking vertical
+   * touch scrolling of the surrounding page on phones and tablets.
+   */
+  .hw-touch-scroll {
     -webkit-overflow-scrolling: touch;
   }
 }