responsive

frontend/src/routes/account/+page.svelte

@@ -491,10 +491,13 @@
 				</Card.Root>
 			{:else if activeTab === 'history'}
 				<!-- Upcoming Bookings -->
+				{#if upcomingBookings.length > 0}
 					<Card.Root class="mb-6">
 						<Card.Header>
 							<Card.Title>Upcoming Appointments</Card.Title>
-						<Card.Description>Next 3 upcoming bookings</Card.Description>
+							<Card.Description
+								>Next {upcomingBookings.length < 3 ? upcomingBookings.length : 3} upcoming bookings</Card.Description
+							>
 						</Card.Header>
 						<Card.Content class="space-y-2">
 							{#if loadingUpcoming}
@@ -547,12 +550,14 @@
 												</span>
 											</div>
 										</div>
-									<Button variant="outline" onclick={() => goto(`/bookings/${b.id}`)}>View</Button>
+										<Button variant="outline" onclick={() => goto(`/bookings/${b.id}`)}>View</Button
+										>
 									</div>
 								{/each}
 							{/if}
 						</Card.Content>
 					</Card.Root>
+				{/if}
 
 				<!-- Past Bookings -->
 				<Card.Root>