fix(web): enable vertical touch scrolling on tables#240
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On touch devices (Android phones, iOS phones, and iOS tablets) the task and patient tables could only be scrolled horizontally. Vertical touch scrolling over the table area was completely broken — the surrounding page would not scroll when the user dragged vertically with a finger on top of a table.
Root cause
The table containers in
TaskList.tsxandPatientList.tsxused the classtouch-pan-x:That class name collides with Tailwind v4's built-in
touch-pan-xutility, which emitstouch-action: pan-x. On touch devices this tells the browser the element only handles horizontal panning, so vertical scroll gestures starting on the table are swallowed and never propagate to the parentoverflow-y-autoscroll container.The custom utility in
globals.csswas only ever intended to add momentum scrolling:…but because of the colliding name it inherited the harmful
touch-action: pan-xfrom Tailwind.Fix
Rename the custom utility to
hw-touch-scroll(no collision with any Tailwind utility). It still enables momentum scrolling, whiletouch-actionfalls back to its defaultauto— so the table scrolls horizontally and vertical drags scroll the page as expected.globals.css: rename.touch-pan-x→.hw-touch-scroll, with an explanatory comment about why Tailwind'stouch-pan-xmust be avoided.TaskList.tsx/PatientList.tsx: usehw-touch-scrollinstead oftouch-pan-x.No behavior change on desktop; horizontal table scrolling is preserved.
https://claude.ai/code/session_01D3JcefZKvXmtdbmeFNQXSu
Generated by Claude Code