diff --git a/web/components/tables/PatientList.tsx b/web/components/tables/PatientList.tsx
index eeb1f3f..a246375 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 fc7da8f..3cfcd3e 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 1d8e81f..07f0c56 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;
   }
 }