From 5822c873f7d651f5aa1ab03b286f0564fb689acf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Thu, 14 May 2026 15:12:54 +0200 Subject: [PATCH] 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. --- src/app/medications/page.tsx | 6 +++--- src/components/admin/admin-shell.tsx | 10 ++++++++-- src/components/layout/top-bar.tsx | 7 +++++-- src/components/medications/medication-form.tsx | 2 +- src/components/settings/settings-shell.tsx | 5 ++++- 5 files changed, 21 insertions(+), 9 deletions(-) diff --git a/src/app/medications/page.tsx b/src/app/medications/page.tsx index 9128f9d43..70ba80ec8 100644 --- a/src/app/medications/page.tsx +++ b/src/app/medications/page.tsx @@ -120,7 +120,7 @@ export default function MedicationsPage() { if (!isAuthenticated) { return ( -
+

{t("medications.title")} @@ -143,7 +143,7 @@ export default function MedicationsPage() { const inactiveMeds = medsArray.filter((m) => !m.active).sort(byName); return ( -
+

@@ -195,7 +195,7 @@ export default function MedicationsPage() { } /> ) : ( -
+
{/* Active medications */} {activeMeds.length > 0 && (
diff --git a/src/components/admin/admin-shell.tsx b/src/components/admin/admin-shell.tsx index b2a88204b..9b4f395f6 100644 --- a/src/components/admin/admin-shell.tsx +++ b/src/components/admin/admin-shell.tsx @@ -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", diff --git a/src/components/layout/top-bar.tsx b/src/components/layout/top-bar.tsx index 4bf0fa2fc..9bc4cfe82 100644 --- a/src/components/layout/top-bar.tsx +++ b/src/components/layout/top-bar.tsx @@ -61,7 +61,9 @@ export function TopBar() { {user.username} @@ -128,7 +130,8 @@ export function TopBar() { ) : ( {t("nav.login")} diff --git a/src/components/medications/medication-form.tsx b/src/components/medications/medication-form.tsx index f3d659149..46c0b7b54 100644 --- a/src/components/medications/medication-form.tsx +++ b/src/components/medications/medication-form.tsx @@ -849,7 +849,7 @@ export function MedicationForm({ onClick={() => updateSchedule(i, "intervalWeeks", weeks) } - className={`h-8 rounded-md border text-xs font-medium transition-colors ${ + className={`min-h-11 rounded-md border text-xs font-medium transition-colors ${ s.intervalWeeks === weeks ? "border-primary bg-primary text-primary-foreground" : "border-border/70 bg-muted text-foreground/70 hover:bg-accent hover:text-foreground" diff --git a/src/components/settings/settings-shell.tsx b/src/components/settings/settings-shell.tsx index bf15a02da..9fea112ef 100644 --- a/src/components/settings/settings-shell.tsx +++ b/src/components/settings/settings-shell.tsx @@ -158,7 +158,10 @@ export function SettingsShell({ active, children }: SettingsShellProps) { href={`/settings/${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-settings + // 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",