another small ui fix

src/app.css

@@ -4,6 +4,7 @@ html,
 body {
     height: 100%;
     scroll-behavior: smooth;
+    background-color: #e7f7df;
 }
 
 @keyframes fade-in {

src/routes/(area)/+layout.svelte

@@ -1,3 +0,0 @@
-<div class="min-h-full bg-[#e7f7df]">
-    <slot />
-</div>

src/routes/(area)/today/+page.svelte

@@ -75,6 +75,18 @@
         })
     });
 
+    onMount(() => {
+        if (typeof window !== 'object') return;
+
+        const listener = () => {
+            const container = document.getElementById('container') as HTMLDivElement;
+            container.style.height = document.body.offsetHeight + 'px';
+        };
+
+        listener();
+        window.addEventListener('resize', listener);
+    })
+
     const start = () => {
         recordingStart = new Date();
         recorder?.start();
@@ -109,83 +121,76 @@
     };
 </script>
 
-<div class="min-rh-screen">
+<div id="container" class="relative w-full">
-    <div class="rh-screen p-4 min-h-0 grid place-items-center">
+    <div class="absolute left-0 right-0 m-auto h-full w-full max-w-[70vh] p-4">
         <video
             autoplay muted bind:this={video}
-            class="opacity-0 h-full w-full min-h-0 max-w-[70vh] object-cover rounded-[40px] bg-[#303030] fade-in"
+            class="opacity-0 h-full w-full object-cover rounded-[40px] bg-[#303030] fade-in"
             style="animation-delay: 500ms;"
         >
             <track kind="captions" />
         </video>
-
-        <div
-            class="absolute top-0 left-0 right-0 p-6 m-auto w-fit scale-in"
-            style="animation-delay: 50ms;"
-        >
-            <div class="rounded-3xl bg-white px-3 py-1 font-serif text-center w-fit">
-                <h1 class="font-bold text-xl">{now.toLocaleDateString(lang(), { dateStyle: 'long' })}</h1>
-                <h2 class="text-sm">{now.toLocaleTimeString(lang())}</h2>
-            </div>
-
-            {#if !!recordingStart}
-                <div class="h-1"></div>
-                <div class="rounded-3xl bg-white px-3 py-1 font-serif flex gap-1 items-center w-fit m-auto scale-in">
-                    <svg class="blink" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="24px" fill="red"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
-                    <div>
-                        <span class="text-md">
-                            <!-- <span class="font-bold">Recording</span> -->
-                            <span>{dateDiff(now, recordingStart).toLocaleTimeString(lang(), { minute: 'numeric', second: 'numeric' })}</span>
-                        </span>
-                    </div>
-                </div>
-            {/if}
-        </div>
-
-        <div
-            class="absolute bottom-0 left-0 right-0 p-6 m-auto w-fit fade-in"
-            style="animation-delay: 50ms;"
-        >
-            <button
-                class={`font-serif px-5 py-3 rounded-3xl text-white font-bold text-2xl cursor-pointer ${recordingStart ? 'bg-[#e14c2f]' : 'bg-[#2596be]'}`}
-                style="transition-duration: 250ms;"
-                onclick={() => recordingStart ? stop() : start()}
-            >
-                {recordingStart ? 'Stop' : 'Start'}
-            </button>
-        </div>
     </div>
 
-    {#if recordingURL}
+    <div
-        <div class="h-8"></div>
+        class="absolute top-0 left-0 right-0 p-6 m-auto w-fit"
-
+    >
-        <div class="p-4 min-h-0 grid place-items-center">
+        <div class="rounded-3xl bg-white px-3 py-1 font-serif text-center w-fit scale-in" style="animation-delay: 150ms;">
-            <video controls bind:this={finalVideo}
+            <h1 class="font-bold text-xl">{now.toLocaleDateString(lang(), { dateStyle: 'long' })}</h1>
-                src={recordingURL}
+            <h2 class="text-sm">{now.toLocaleTimeString(lang())}</h2>
-                class="opacity-0 h-full w-full max-w-[50vh] min-h-0 w-full object-cover rounded-[40px] bg-[#303030] fade-in"
-                style="aspect-ratio: 320 / 480;"
-            >
-                <track kind="captions" />
-            </video>
-
-            <div class="h-2"></div>
-
-            <button
-                class={`font-serif px-5 py-3 rounded-3xl text-white font-bold text-2xl cursor-pointer bg-[#2596be]`}
-                style="transition-duration: 250ms;"
-                onclick={submit}
-            >
-                Submit
-            </button>
         </div>
-    {/if}
+
+        {#if !!recordingStart}
+            <div class="h-1"></div>
+            <div class="rounded-3xl bg-white px-3 py-1 font-serif flex gap-1 items-center w-fit m-auto scale-in">
+                <svg class="blink" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="24px" fill="red"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
+                <div>
+                    <span class="text-md">
+                        <!-- <span class="font-bold">Recording</span> -->
+                        <span>{dateDiff(now, recordingStart).toLocaleTimeString(lang(), { minute: 'numeric', second: 'numeric' })}</span>
+                    </span>
+                </div>
+            </div>
+        {/if}
+    </div>
+
+    <div
+        class="absolute bottom-0 left-0 right-0 p-6 m-auto w-fit fade-in"
+        style="animation-delay: 50ms;"
+    >
+        <button
+            class={`font-serif px-5 py-3 rounded-3xl text-white font-bold text-2xl cursor-pointer ${recordingStart ? 'bg-[#e14c2f]' : 'bg-[#2596be]'}`}
+            style="transition-duration: 250ms;"
+            onclick={() => recordingStart ? stop() : start()}
+        >
+            {recordingStart ? 'Stop' : 'Start'}
+        </button>
+    </div>
 </div>
 
-<!-- <canvas class="hidden" bind:this={renderCanvas}></canvas>
+{#if recordingURL}
-<canvas class="hidden" bind:this={captureCanvas}></canvas>
+    <div class="h-8"></div>
-<video class="hidden" bind:this={sourceVideo}>
+
-    <track kind="captions" />
+    <div class="p-4 min-h-0 grid place-items-center">
-</video> -->
+        <video controls bind:this={finalVideo}
+            src={recordingURL}
+            class="opacity-0 h-full w-full max-w-[50vh] min-h-0 w-full object-cover rounded-[40px] bg-[#303030] fade-in"
+            style="aspect-ratio: 320 / 480;"
+        >
+            <track kind="captions" />
+        </video>
+
+        <div class="h-2"></div>
+
+        <button
+            class={`font-serif px-5 py-3 rounded-3xl text-white font-bold text-2xl cursor-pointer bg-[#2596be]`}
+            style="transition-duration: 250ms;"
+            onclick={submit}
+        >
+            Submit
+        </button>
+    </div>
+{/if}
 
 <style>
 </style>