diff --git a/src/app/globals.css b/src/app/globals.css index 4696df20e..20db09ff5 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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 { diff --git a/src/components/cycle/cycle-view.tsx b/src/components/cycle/cycle-view.tsx index 74e6b9bea..37562ae52 100644 --- a/src/components/cycle/cycle-view.tsx +++ b/src/components/cycle/cycle-view.tsx @@ -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. */} - + {tabs.map((tab) => { if (tab.kind === "link") {