diff --git a/changes/mobile-nav-label-size.md b/changes/mobile-nav-label-size.md new file mode 100644 index 00000000..2eb96195 --- /dev/null +++ b/changes/mobile-nav-label-size.md @@ -0,0 +1,3 @@ +### Fixed + +- Increased the mobile bottom navigation labels from 10px to 12px with a 16px line height, keeping 56px touch targets on small screens. diff --git a/frontend/src/lib/components/mobile-bottom-nav.svelte b/frontend/src/lib/components/mobile-bottom-nav.svelte index 547d0421..4d8454e9 100644 --- a/frontend/src/lib/components/mobile-bottom-nav.svelte +++ b/frontend/src/lib/components/mobile-bottom-nav.svelte @@ -75,7 +75,7 @@ type="button" data-cuelume-toggle={item.id === 'new' ? 'release' : 'tick'} class={[ - 'flex min-h-14 w-full flex-col items-center justify-center gap-1 rounded-md px-1 text-[0.625rem] font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', + 'flex min-h-14 w-full flex-col items-center justify-center gap-1 rounded-md px-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', item.id === 'new' ? 'text-primary' : active @@ -92,7 +92,7 @@ > - {labelFor(item.id)} + {labelFor(item.id)} {/each} @@ -104,7 +104,7 @@ {...props} type="button" class={[ - 'flex min-h-14 w-full flex-col items-center justify-center gap-1 rounded-md px-1 text-[0.625rem] font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', + 'flex min-h-14 w-full flex-col items-center justify-center gap-1 rounded-md px-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', moreActive ? 'bg-accent text-foreground' : 'text-muted-foreground' ]} aria-current={moreActive ? 'page' : undefined} @@ -113,7 +113,7 @@ - {m.sidebar_more()} + {m.sidebar_more()} {/snippet}