fix(nav): bottom-nav 5+More overflow protects 44px tap targets

The 7-item bottom nav collapsed each touch target to ~50 px wide on
a 375 px viewport — only just-passing WCAG 2.5.5's 44 px floor and
visibly cramped on iPhone-13-mini-class screens. The mobile audit
(`.planning/phase-A5-mobile-findings.md`) recommended 5+More.

Primary strip keeps the four most-used surfaces plus Insights:
Home, Measurements, Mood, Medications, Insights. Targets and
Achievements move into a Radix `<Sheet>` triggered by a sixth
"More" entry. Order matches the v1.4.15 layout for the four core
items so muscle memory holds.

The More button mirrors the same `min-h-11 min-w-11` hit area;
`aria-haspopup="dialog"` + `aria-expanded` keeps screen-reader
behaviour tight; the sheet renders bottom-anchored with safe-area
padding so the inner links stay reachable above the iPhone home
indicator. Active styling lights the More entry whenever any of
its overflow children is the current route, so the user always
knows which strip-level link "owns" their position.
This commit is contained in:
Marc-André Bombeck committed 2026-05-10 00:39:59 +02:00
1 parent d2bda42a3b
commit 072eee6997
4 files changed
+213 -39

No files matched your search

+4 -1
View File
@@ -169,7 +169,10 @@
"sidebar": "Sidebar",
"mainNavigation": "Hauptnavigation",
"mobileNavigation": "Mobile Navigation",
"loadingScreen": "Laden…"
"loadingScreen": "Laden…",
"more": "Mehr",
"moreSheetTitle": "Mehr",
"moreSheetDescription": "Seiten, die nicht in die untere Leiste passen."
},
"auth": {
"login": "Anmelden",
+4 -1
View File
@@ -169,7 +169,10 @@
"sidebar": "Sidebar",
"mainNavigation": "Main navigation",
"mobileNavigation": "Mobile navigation",
"loadingScreen": "Loading…"
"loadingScreen": "Loading…",
"more": "More",
"moreSheetTitle": "More",
"moreSheetDescription": "Pages that don't fit the bottom bar."
},
"auth": {
"login": "Sign in",