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,21 +121,21 @@
     };
 </script>
 
-<div class="min-rh-screen">
-    <div class="rh-screen p-4 min-h-0 grid place-items-center">
+<div id="container" class="relative w-full">
+    <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>
 
     <div
-            class="absolute top-0 left-0 right-0 p-6 m-auto w-fit scale-in"
-            style="animation-delay: 50ms;"
+        class="absolute top-0 left-0 right-0 p-6 m-auto w-fit"
     >
-            <div class="rounded-3xl bg-white px-3 py-1 font-serif text-center w-fit">
+        <div class="rounded-3xl bg-white px-3 py-1 font-serif text-center w-fit scale-in" style="animation-delay: 150ms;">
             <h1 class="font-bold text-xl">{now.toLocaleDateString(lang(), { dateStyle: 'long' })}</h1>
             <h2 class="text-sm">{now.toLocaleTimeString(lang())}</h2>
         </div>
@@ -154,9 +166,9 @@
             {recordingStart ? 'Stop' : 'Start'}
         </button>
     </div>
-    </div>
+</div>
 
-    {#if recordingURL}
+{#if recordingURL}
     <div class="h-8"></div>
 
     <div class="p-4 min-h-0 grid place-items-center">
@@ -178,14 +190,7 @@
             Submit
         </button>
     </div>
-    {/if}
-</div>
-
-<!-- <canvas class="hidden" bind:this={renderCanvas}></canvas>
-<canvas class="hidden" bind:this={captureCanvas}></canvas>
-<video class="hidden" bind:this={sourceVideo}>
-    <track kind="captions" />
-</video> -->
+{/if}
 
 <style>
 </style>