From 73f0258b9770d12b89c33ca1d0718653c2e67e02 Mon Sep 17 00:00:00 2001
From: Stephen Adamson <popertots@gmail.com>
Date: Thu, 20 Aug 2026 13:12:52 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20mobile=20UI=20=E2=80=94=20touch=20target?=
 =?UTF-8?q?s,=20safe=20areas,=20text=20sizes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Button: add min-h-11 (44px) for mobile touch targets
- NavBar: add safe-area-inset-top for notched phones
- NavBar mobile menu: increase link padding from py-2 to py-3
- Footer: increase text size from text-xs to text-sm (16px minimum)
- Footer: add px-4 for better mobile spacing
- DatePicker: increase calendar cell size on mobile to 44px
- Checkbox: add p-3 -m-3 on mobile for 44px touch target (desktop unchanged)
---
 .../lib/components/booking/DatePicker.svelte    |  2 +-
 .../src/lib/components/layout/NavBar.svelte     | 17 +++++++++--------
 .../src/lib/components/ui/button/button.svelte  |  2 +-
 .../lib/components/ui/checkbox/checkbox.svelte  |  2 +-
 frontend/src/routes/+layout.svelte              |  6 +++---
 5 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/components/booking/DatePicker.svelte b/frontend/src/lib/components/booking/DatePicker.svelte
index 5856f2e..0dddff8 100644
--- a/frontend/src/lib/components/booking/DatePicker.svelte
+++ b/frontend/src/lib/components/booking/DatePicker.svelte
@@ -34,7 +34,7 @@
 		// Without this the stable isDateUnavailable reference may cause stale availability
 		// after workingHours/availableHours are updated (e.g. after month data loading).
 		isDateUnavailable={(d) => isDateUnavailable(d)}
-		class="bg-transparent p-0 [--cell-size:--spacing(11)] data-unavailable:line-through data-unavailable:opacity-100 max-sm:[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)] [&_[data-outside-month]]:pointer-events-none [&_[data-outside-month]]:opacity-0"
+		class="bg-transparent p-0 [--cell-size:--spacing(11)] data-unavailable:line-through data-unavailable:opacity-100 max-sm:[--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)] [&_[data-outside-month]]:pointer-events-none [&_[data-outside-month]]:opacity-0"
 		weekdayFormat="short"
 		{minValue}
 		{maxValue}
diff --git a/frontend/src/lib/components/layout/NavBar.svelte b/frontend/src/lib/components/layout/NavBar.svelte
index b9cd442..afc4c28 100644
--- a/frontend/src/lib/components/layout/NavBar.svelte
+++ b/frontend/src/lib/components/layout/NavBar.svelte
@@ -91,6 +91,7 @@
 
 <nav
 	class="fixed top-0 left-0 z-50 w-full border-b border-gray-200"
+	style="padding-top: env(safe-area-inset-top, 0px)"
 	class:frosty-nav={!mobileMenuOpen}
 	class:bg-background={mobileMenuOpen}
 >
@@ -231,14 +232,14 @@
 							<!-- eslint-disable svelte/no-navigation-without-resolve -->
 							<Skeleton class="h-4 w-full rounded" />
 						{:else}
-							<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-							<a
-								href={link.href}
-								class="block rounded px-3 py-2 text-center text-primary hover:text-gray-800"
-							>
-								{link.label}
-							</a>
-							<!-- eslint-enable svelte/no-navigation-without-resolve -->
+						<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+						<a
+							href={link.href}
+							class="block rounded px-3 py-3 text-center text-primary hover:text-gray-800"
+						>
+							{link.label}
+						</a>
+						<!-- eslint-enable svelte/no-navigation-without-resolve -->
 						{/if}
 					{/if}
 				{/each}
diff --git a/frontend/src/lib/components/ui/button/button.svelte b/frontend/src/lib/components/ui/button/button.svelte
index 52393f3..a098a82 100644
--- a/frontend/src/lib/components/ui/button/button.svelte
+++ b/frontend/src/lib/components/ui/button/button.svelte
@@ -4,7 +4,7 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const buttonVariants = tv({
-		base: "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 relative inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden rounded-md text-sm font-medium whitespace-nowrap outline-hidden transition-all select-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 active:opacity-80 active:scale-[0.99] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		base: "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 relative inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden rounded-md text-sm font-medium whitespace-nowrap outline-hidden transition-all select-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 active:opacity-80 active:scale-[0.99] min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-2xs',
diff --git a/frontend/src/lib/components/ui/checkbox/checkbox.svelte b/frontend/src/lib/components/ui/checkbox/checkbox.svelte
index 7182eb1..7255cdc 100644
--- a/frontend/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/frontend/src/lib/components/ui/checkbox/checkbox.svelte
@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		'peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input bg-white shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
+		'peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input bg-white shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground p-3 -m-3 md:p-0 md:m-0 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
 		className
 	)}
 	bind:checked
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 1e634d7..d30e4ae 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -167,8 +167,8 @@
 	</main>
 
 	{#if !hideFooter}
-		<footer class="border-t py-3 text-center text-xs text-gray-500 md:py-4 md:text-sm">
-			<div class="mx-auto flex max-w-3xl flex-wrap items-center justify-center gap-x-4 gap-y-1">
+		<footer class="border-t py-4 text-center text-sm text-gray-500 md:py-6">
+			<div class="mx-auto flex max-w-3xl flex-wrap items-center justify-center gap-x-4 gap-y-2 px-4">
 				<a href={resolve('/privacy-policy')} class="hover:text-gray-700 hover:underline"
 					>Privacy Policy</a
 				>
@@ -183,7 +183,7 @@
 				>
 				<a href={resolve('/gdpr')} class="hover:text-gray-700 hover:underline">Your Data</a>
 			</div>
-			<div class="mt-1">&copy; {new Date().getFullYear()} Crussell Nails. All rights reserved.</div>
+			<div class="mt-2">&copy; {new Date().getFullYear()} Crussell Nails. All rights reserved.</div>
 		</footer>
 	{/if}
 </div>