feat(mobile): add scroll-touch momentum utility for horizontal strips

Add a `.scroll-touch` utility that restores iOS WebKit momentum
scrolling (`-webkit-overflow-scrolling: touch`) and contains the
overscroll chain so a flick at the end of a horizontal row does not
rubber-band the whole page. Apply it to the insights tab strip and the
cycle tab list — the two in-app horizontal scrollers that lost inertial
flick under the default `overflow-x-auto`.
This commit is contained in:
Marc-André Bombeck committed 2026-06-19 21:18:05 +02:00
1 parent 876e94b5c4
commit d2be72d57a
3 files changed
+17 -2

No files matched your search

+1 -1
View File
@@ -255,7 +255,7 @@ export function CycleView() {
triggers size to their content (`text-xs`, no `flex-1`) and the
strip scrolls cleanly if needed; from `sm` up they reclaim the
equal-width `flex-1` layout. */}
<TabsList className="w-full max-w-full overflow-x-auto">
<TabsList className="scroll-touch w-full max-w-full overflow-x-auto">
<TabsTrigger
value="calendar"
className="text-xs sm:flex-1 sm:text-sm"
@@ -709,7 +709,7 @@ function InsightsTabStripImpl({
// gives that room back to the layout so the strip height is
// unchanged. `px-1 -mx-1` does the same horizontally so the
// first/last pill's focus ring isn't clipped at the row edges.
className="-mx-1 -my-1 flex min-w-0 flex-1 [scrollbar-width:none] gap-2 overflow-x-auto px-1 py-1 [&::-webkit-scrollbar]:hidden"
className="scroll-touch -mx-1 -my-1 flex min-w-0 flex-1 [scrollbar-width:none] gap-2 overflow-x-auto px-1 py-1 [&::-webkit-scrollbar]:hidden"
>
{tabs.map((tab) => {
if (tab.kind === "link") {