From 0d4d348979abccd80e48acf87e83c0e4d2276ca9 Mon Sep 17 00:00:00 2001
From: Ludwig Lehnert <ludwig@lehnert.dev>
Date: Fri, 13 Jun 2025 09:48:30 +0200
Subject: [PATCH] another small fix

---
 src/app.css                          |  8 ++++++++
 src/app.html                         |  2 +-
 src/routes/(area)/log/+page.svelte   |  2 +-
 src/routes/(area)/today/+page.svelte |  4 ++--
 src/routes/+layout.svelte            | 10 ++++++++++
 svelte.config.js                     |  4 +++-
 6 files changed, 25 insertions(+), 5 deletions(-)
diff --git a/src/app.css b/src/app.css
index 5615ec8..f8f41ea 100644
--- a/src/app.css
+++ b/src/app.css
@@ -62,3 +62,11 @@ body {
     animation-timing-function: linear;
     animation-duration: 1s;
 }
+
+.rh-screen {
+    height: calc(100 * var(--vh));
+}
+
+.min-rh-screen {
+    min-height: calc(100 * var(--vh));
+}
diff --git a/src/app.html b/src/app.html
index 895d79b..1ddeee6 100644
--- a/src/app.html
+++ b/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
+	<body data-sveltekit-preload-data="hover" style="--vh: 1vh">
 		<div id="root" style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/routes/(area)/log/+page.svelte b/src/routes/(area)/log/+page.svelte
index 272b126..836d7fc 100644
--- a/src/routes/(area)/log/+page.svelte
+++ b/src/routes/(area)/log/+page.svelte
@@ -42,7 +42,7 @@
     };
 </script>
 
-<div class="h-screen p-4 flex flex-col items-center">
+<div class="rh-screen p-4 flex flex-col items-center">
     <div class="shrink-0">
         <input type="date"
             class="px-4 py-2 rounded-full bg-white min-w-0"
diff --git a/src/routes/(area)/today/+page.svelte b/src/routes/(area)/today/+page.svelte
index 5a9b778..1f32ae4 100644
--- a/src/routes/(area)/today/+page.svelte
+++ b/src/routes/(area)/today/+page.svelte
@@ -107,8 +107,8 @@
     };
 </script>
 
-<div class="min-h-screen">
-    <div class="h-screen p-4 min-h-0 grid place-items-center">
+<div class="min-rh-screen">
+    <div class="rh-screen p-4 min-h-0 grid place-items-center">
         <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"
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1fe2550..7d6f443 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,15 @@
 <script>
+    import { onMount } from "svelte";
     import "../app.css";
+
+    onMount(() => {
+        if (typeof window !== 'object') return;
+
+        document.body.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
+        window.addEventListener('resize', () => {
+            document.body.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
+        });
+    });
 </script>
 
 <slot />
diff --git a/svelte.config.js b/svelte.config.js
index e0a641e..ecf8f75 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -11,7 +11,9 @@ const config = {
 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter({
+			
+		})
 	}
 };
 
