From 8ad4d56c21d2b0aeba8a2cef7948f973d590dbfe Mon Sep 17 00:00:00 2001
From: Matiss Jurevics <matissjurevics@gmail.com>
Date: Sun, 29 Mar 2026 11:20:00 +0000
Subject: [PATCH] fix(webapp): constrain client stream viewer layout

---
 WebApp/src/routes/client/+page.svelte | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/WebApp/src/routes/client/+page.svelte b/WebApp/src/routes/client/+page.svelte
index 601fda2..41a5bb9 100644
--- a/WebApp/src/routes/client/+page.svelte
+++ b/WebApp/src/routes/client/+page.svelte
@@ -32,7 +32,7 @@
 </script>
 
 <AppChrome pageKey="client">
-	<section id="screen-home-client" class="flex flex-col gap-12 max-w-7xl mx-auto h-full">
+	<section id="screen-home-client" class="mx-auto flex h-full max-w-7xl min-h-0 flex-col gap-8">
 		<div class="flex justify-between items-center mb-4">
 			<h2 class="text-2xl font-bold text-white tracking-tight">Client Dashboard</h2>
 			<div class="flex gap-3">
@@ -183,10 +183,10 @@
 			</CardContent>
 		</Card>
 
-		<div class="flex flex-col xl:flex-row gap-8 flex-1 min-h-0">
+		<div class="flex flex-1 min-h-0 flex-col gap-8 xl:flex-row">
 			<Card
 				id="clientStreamViewerWrapper"
-				class="glass-card min-h-[400px] flex-1 overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80 shadow-xl {$appState.activeCameraDeviceId ? '' : 'hidden'}"
+				class="glass-card min-w-0 flex-1 overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80 shadow-xl {$appState.activeCameraDeviceId ? 'flex min-h-[400px] flex-col xl:min-h-0' : 'hidden'}"
 			>
 				<CardHeader class="border-b border-white/5 bg-black/20 px-5 py-4">
 					<div class="flex items-center justify-between gap-3">
@@ -212,17 +212,17 @@
 					</div>
 				</CardHeader>
 
-				<CardContent id="clientStreamContainer" class="flex flex-1 items-center justify-center bg-black">
+				<CardContent id="clientStreamContainer" class="relative flex min-h-[320px] flex-1 items-center justify-center overflow-hidden bg-black p-0">
 					<video
 						id="clientStreamVideo"
-						class="absolute inset-0 w-full h-full object-contain {$appState.clientStreamMode === 'video' ? '' : 'hidden'}"
+						class="absolute inset-0 h-full w-full object-contain {$appState.clientStreamMode === 'video' ? '' : 'hidden'}"
 						playsinline
 						bind:this={clientVideoElement}
 					></video>
 
 					<Alert
 						id="clientStreamPlaceholder"
-						class="flex max-w-md flex-col items-center gap-4 border-white/10 bg-black/40 text-center {$appState.clientStreamMode === 'none' || $appState.clientStreamMode === 'connecting' || $appState.clientStreamMode === 'unavailable' ? '' : 'hidden'}"
+						class="relative z-10 m-6 flex max-w-md flex-col items-center gap-4 border-white/10 bg-black/40 text-center {$appState.clientStreamMode === 'none' || $appState.clientStreamMode === 'connecting' || $appState.clientStreamMode === 'unavailable' ? '' : 'hidden'}"
 					>
 						<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 							<path
@@ -240,7 +240,7 @@
 				</CardContent>
 			</Card>
 
-			<div class="xl:w-96 shrink-0 flex flex-col gap-6 overflow-y-auto pr-2">
+			<div class="flex shrink-0 flex-col gap-6 pr-2 xl:max-h-full xl:w-96 xl:overflow-y-auto">
 				<Card class="glass-card flex-1 rounded-3xl border-white/10 bg-[#16161d]/80">
 					<CardHeader>
 						<CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-400">Recent Recordings</CardTitle>