From 969d5ed4a8ffa30e1913fef59cb77ca37664af68 Mon Sep 17 00:00:00 2001
From: "usehoplite[bot]" <288093033+usehoplite[bot]@users.noreply.github.com>
Date: Wed, 2 Sep 2026 08:11:34 +0000
Subject: [PATCH] fix(frontend): enlarge mobile bottom nav labels to 12px

---
 changes/mobile-nav-label-size.md                     | 3 +++
 frontend/src/lib/components/mobile-bottom-nav.svelte | 8 ++++----
 2 files changed, 7 insertions(+), 4 deletions(-)
 create mode 100644 changes/mobile-nav-label-size.md

diff --git a/changes/mobile-nav-label-size.md b/changes/mobile-nav-label-size.md
new file mode 100644
index 000000000..2eb961951
--- /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 547d04217..4d8454e90 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 @@
 					>
 						<Icon class={item.id === 'new' ? 'size-5' : 'size-4'} />
 					</span>
-					<span class="max-w-full truncate leading-none">{labelFor(item.id)}</span>
+					<span class="max-w-full truncate leading-4">{labelFor(item.id)}</span>
 				</button>
 			</li>
 		{/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 @@
 							<span class="flex size-5 items-center justify-center">
 								<MoreIcon class="size-4" />
 							</span>
-							<span class="max-w-full truncate leading-none">{m.sidebar_more()}</span>
+							<span class="max-w-full truncate leading-4">{m.sidebar_more()}</span>
 						</button>
 					{/snippet}
 				</DropdownMenu.Trigger>