From 1e8995f577295ee0afc3da24245e715a6cce86a6 Mon Sep 17 00:00:00 2001
From: Stephen Adamson <popertots@gmail.com>
Date: Tue, 6 Jan 2026 16:55:26 +0000
Subject: [PATCH] responsive

---
 frontend/src/routes/account/+page.svelte | 117 ++++++++++++-----------
 1 file changed, 61 insertions(+), 56 deletions(-)

diff --git a/frontend/src/routes/account/+page.svelte b/frontend/src/routes/account/+page.svelte
index b47d217..c146063 100644
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -491,68 +491,73 @@
 				</Card.Root>
 			{:else if activeTab === 'history'}
 				<!-- Upcoming Bookings -->
-				<Card.Root class="mb-6">
-					<Card.Header>
-						<Card.Title>Upcoming Appointments</Card.Title>
-						<Card.Description>Next 3 upcoming bookings</Card.Description>
-					</Card.Header>
-					<Card.Content class="space-y-2">
-						{#if loadingUpcoming}
-							{#each Array(3) as _, i (i)}
-								<Skeleton class="h-16 w-full" />
-							{/each}
-						{:else if upcomingBookings.length === 0}
-							<div class="py-4 text-center text-gray-500">No upcoming bookings</div>
-						{:else}
-							{#each upcomingBookings as b (b.id)}
-								<div class="flex items-center justify-between rounded bg-gray-50 p-2">
-									<div class="flex-1">
-										<div class="font-medium">{formatDateTime(b.start_time)}</div>
-										<div class="mt-1 flex items-center gap-2 text-xs text-gray-500">
-											<span
-												class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {b.status ===
-												'confirmed'
-													? 'bg-emerald-100 text-emerald-800'
-													: b.status === 'pending'
-														? 'bg-amber-100 text-amber-800'
-														: b.status === 'in_progress'
-															? 'bg-blue-100 text-blue-800'
-															: b.status === 'completed'
-																? 'bg-green-100 text-green-800'
-																: 'bg-gray-100 text-gray-800'}"
-											>
+				{#if upcomingBookings.length > 0}
+					<Card.Root class="mb-6">
+						<Card.Header>
+							<Card.Title>Upcoming Appointments</Card.Title>
+							<Card.Description
+								>Next {upcomingBookings.length < 3 ? upcomingBookings.length : 3} upcoming bookings</Card.Description
+							>
+						</Card.Header>
+						<Card.Content class="space-y-2">
+							{#if loadingUpcoming}
+								{#each Array(3) as _, i (i)}
+									<Skeleton class="h-16 w-full" />
+								{/each}
+							{:else if upcomingBookings.length === 0}
+								<div class="py-4 text-center text-gray-500">No upcoming bookings</div>
+							{:else}
+								{#each upcomingBookings as b (b.id)}
+									<div class="flex items-center justify-between rounded bg-gray-50 p-2">
+										<div class="flex-1">
+											<div class="font-medium">{formatDateTime(b.start_time)}</div>
+											<div class="mt-1 flex items-center gap-2 text-xs text-gray-500">
 												<span
-													class="mr-1 h-1.5 w-1.5 rounded-full {b.status === 'confirmed'
-														? 'bg-emerald-600'
+													class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {b.status ===
+													'confirmed'
+														? 'bg-emerald-100 text-emerald-800'
 														: b.status === 'pending'
-															? 'bg-amber-600'
+															? 'bg-amber-100 text-amber-800'
 															: b.status === 'in_progress'
-																? 'bg-blue-600'
+																? 'bg-blue-100 text-blue-800'
 																: b.status === 'completed'
-																	? 'bg-green-600'
-																	: 'bg-gray-600'}"
-												></span>
-												{b.status}
-											</span>
-											<span>
-												- {(() => {
-													const services = (b.services || []).map(
-														(s) => s.service_name || 'Unknown Service'
-													);
-													if (services.length === 0) return 'No services';
-													if (services.length === 1) return services[0];
-													if (services.length === 2) return services.join(' and ');
-													return `${services[0]} and ${services.length - 1} other${services.length - 1 > 1 ? 's' : ''}`;
-												})()}
-											</span>
+																	? 'bg-green-100 text-green-800'
+																	: 'bg-gray-100 text-gray-800'}"
+												>
+													<span
+														class="mr-1 h-1.5 w-1.5 rounded-full {b.status === 'confirmed'
+															? 'bg-emerald-600'
+															: b.status === 'pending'
+																? 'bg-amber-600'
+																: b.status === 'in_progress'
+																	? 'bg-blue-600'
+																	: b.status === 'completed'
+																		? 'bg-green-600'
+																		: 'bg-gray-600'}"
+													></span>
+													{b.status}
+												</span>
+												<span>
+													- {(() => {
+														const services = (b.services || []).map(
+															(s) => s.service_name || 'Unknown Service'
+														);
+														if (services.length === 0) return 'No services';
+														if (services.length === 1) return services[0];
+														if (services.length === 2) return services.join(' and ');
+														return `${services[0]} and ${services.length - 1} other${services.length - 1 > 1 ? 's' : ''}`;
+													})()}
+												</span>
+											</div>
 										</div>
+										<Button variant="outline" onclick={() => goto(`/bookings/${b.id}`)}>View</Button
+										>
 									</div>
-									<Button variant="outline" onclick={() => goto(`/bookings/${b.id}`)}>View</Button>
-								</div>
-							{/each}
-						{/if}
-					</Card.Content>
-				</Card.Root>
+								{/each}
+							{/if}
+						</Card.Content>
+					</Card.Root>
+				{/if}
 
 				<!-- Past Bookings -->
 				<Card.Root>