fix(mobile): hit WCAG 2.5.5 44 px touch-target floor across top-bar + section strips

Pixel-5 (393 px) audit flagged four primary navigation surfaces that
were below the 44 px touch-target floor:

  - TopBar user-menu trigger and login link: text-only flex with
    py-1.5 measured ~30 px tall. Added min-h-11 min-w-11 with a
    rounded hit zone so the trigger lands on the WCAG floor without
    visibly altering the icon's position.

  - SettingsShell mobile section chip-strip and AdminShell mobile
    section chip-strip: rounded-full chips with py-1.5 were ~30 px
    tall. The mobile chip-strips are the primary navigation surface
    for /settings and /admin on touch devices, so min-h-11 was added
    to both.

  - medication-form schedule interval picker (1W / 2W / 3W / 4W):
    h-8 native buttons inside a 4-col grid; min-h-11 brings them up
    to the floor without changing column width.

Also normalised the medications page-root spacing from space-y-5 to
space-y-6 to match dashboard / measurements / mood / notifications.
This commit is contained in:
Marc-André Bombeck committed 2026-05-14 15:12:54 +02:00
1 parent 91d5db5853
commit 5822c873f7
5 files changed
+21 -9

No files matched your search

+8 -2
View File
@@ -170,7 +170,10 @@ export function AdminShell({ active, children }: AdminShellProps) {
href="/admin"
aria-current={activeSlug === null ? "page" : undefined}
className={cn(
"flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors",
// v1.4.25 W8 — chip strip is the primary mobile-admin
// navigation surface. Pad to WCAG 2.5.5 44 px so the
// chips can be tapped without zoom on a Pixel-5.
"flex min-h-11 items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors",
activeSlug === null
? "border-primary/40 bg-primary/10 text-primary"
: "border-border text-foreground hover:bg-accent",
@@ -189,7 +192,10 @@ export function AdminShell({ active, children }: AdminShellProps) {
href={`/admin/${section.slug}`}
aria-current={isActive ? "page" : undefined}
className={cn(
"flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors",
// v1.4.25 W8 — chip strip is the primary mobile-admin
// navigation surface. Pad to WCAG 2.5.5 44 px so the
// chips can be tapped without zoom on a Pixel-5.
"flex min-h-11 items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors",
isActive
? "border-primary/40 bg-primary/10 text-primary"
: "border-border text-foreground hover:bg-accent",