Matiss/Final-Year-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(webapp): constrain client stream viewer layout

Browse Source
This commit is contained in:
Matiss Jurevics
2026-03-29 11:20:00 +00:00
parent bd4a643ba7
commit 8ad4d56c21
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
WebApp/src/routes/client/+page.svelte
View File

@@ -32,7 +32,7 @@
</script> </script>
<AppChrome pageKey="client"> <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"> <div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-white tracking-tight">Client Dashboard</h2> <h2 class="text-2xl font-bold text-white tracking-tight">Client Dashboard</h2>
<div class="flex gap-3"> <div class="flex gap-3">
@@ -183,10 +183,10 @@
</CardContent> </CardContent>
</Card> </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 <Card
id="clientStreamViewerWrapper" 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"> <CardHeader class="border-b border-white/5 bg-black/20 px-5 py-4">
<div class="flex items-center justify-between gap-3"> <div class="flex items-center justify-between gap-3">
@@ -212,17 +212,17 @@
</div> </div>
</CardHeader> </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 <video
id="clientStreamVideo" 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 playsinline
bind:this={clientVideoElement} bind:this={clientVideoElement}
></video> ></video>
<Alert <Alert
id="clientStreamPlaceholder" 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"> <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 <path
@@ -240,7 +240,7 @@
</CardContent> </CardContent>
</Card> </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"> <Card class="glass-card flex-1 rounded-3xl border-white/10 bg-[#16161d]/80">
<CardHeader> <CardHeader>
<CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-400">Recent Recordings</CardTitle> <CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-400">Recent Recordings</CardTitle>