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

+15
View File
@@ -448,6 +448,21 @@
display: none;
}
/*
* `.scroll-touch` — momentum scrolling for horizontal scrollers on iOS
* WebKit. `-webkit-overflow-scrolling: touch` restores the inertial
* flick the default `overflow-x-auto` row loses on touch; `overscroll-
* behavior: contain` keeps a flick that reaches the end of the row from
* chaining into the document scroll (the "rubber-band drags the whole
* page" paper-cut). Applied to the in-app horizontal pill / tab strips
* (insights tab strip, cycle tab list) so the gesture matches the
* native feel the bottom-sheet scrollers already get for free.
*/
.scroll-touch {
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* ── Insight card animations ─────────────────────── */
@keyframes insight-fade-in {
from {