From d7c2b2a67b924ac7f8ed947693fcaf45ff0a9ae1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sun, 10 May 2026 00:35:30 +0200 Subject: [PATCH] fix(tabs): horizontal scroll on mobile prevents overflow (insights + admin) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mobile audit (`.planning/phase-A5-mobile-findings.md`) flagged the `` primitive as overflowing the viewport on `/insights`, `/admin` and several `/settings/*` surfaces — six i18n-driven tab labels at typical German widths blow past 375 px before the inline- flex shrink-wraps. Labels can't be truncated deterministically (they include "Auswertungen", "Sicherheit & Privatsphäre"-style strings) and word-wrap inside a tab is the worst possible look. The list now scrolls horizontally on mobile via `overflow-x-auto` + `touch-pan-x` (iOS PWA gesture). `max-w-full` prevents the inline- flex from forcing the parent wider. Desktop renders identically because the existing parent containers all give the strip enough room to lay out without scrollbars. Vertical-tabs orientation keeps its `overflow-x-visible` to avoid double-overflow with the flex-column layout. --- src/components/ui/tabs.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx index e68180218..70835b32f 100644 --- a/src/components/ui/tabs.tsx +++ b/src/components/ui/tabs.tsx @@ -25,8 +25,17 @@ function Tabs({ ); } +// v1.4.16 Wave-C MED — horizontal tab strips overflow viewport on +// mobile when more than ~3 tabs render at typical label widths +// (`/insights`, `/admin`, `/settings/*`). Tab labels are i18n-driven +// so we cannot truncate them deterministically. Instead, the list +// becomes horizontally scrollable on mobile via `overflow-x-auto` +// plus `touch-pan-x` for the iOS PWA, and the wrapping tabs preserve +// `whitespace-nowrap` so labels never word-wrap mid-tab. Desktop +// looks identical because the inline-flex shrink-wraps inside the +// wider container. const tabsListVariants = cva( - "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col", + "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit max-w-full items-center justify-center overflow-x-auto touch-pan-x scrollbar-thin group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:overflow-x-visible", { variants: { variant: {