From f0a7e9f38de20b0f139d0f043012267ce2d3df72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 29 Aug 2022 14:21:06 +0200
Subject: [PATCH] Define vh CSS variable from viewport height

---
 src/routes/+layout.svelte      | 5 +++++
 src/style/organisms/_cart.scss | 4 ++--
 src/style/pages/_viewer.scss   | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9a78688..e283652 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -19,6 +19,7 @@
 
     export let data: PageData
 
+    let innerHeight: number
 
     // Fonts to preload
     const fonts = [
@@ -58,8 +59,12 @@
         // Avoid FOUC
         document.body.style.opacity = '1'
     })
+
+    $: innerHeight && document.body.style.setProperty('--vh', `${innerHeight}px`)
 </script>
 
+<svelte:window bind:innerHeight />
+
 <svelte:head>
     {#each fonts as font}
         <link rel="preload" href="/fonts/{font}.woff2" as="font" type="font/woff2" crossorigin="anonymous">
diff --git a/src/style/organisms/_cart.scss b/src/style/organisms/_cart.scss
index 075c707..bfb0e8b 100644
--- a/src/style/organisms/_cart.scss
+++ b/src/style/organisms/_cart.scss
@@ -4,7 +4,7 @@
     top: 80px;
     right: 0;
     width: 100%;
-    height: calc(100vh - 80px);
+    height: calc(var(--vh) - 80px);
     display: flex;
     flex-direction: column;
     overflow: auto;
@@ -16,7 +16,7 @@
         top: 24px;
         right: 24px;
         width: clamp(320px, 45vw, 500px);
-        height: calc(100vh - 48px);
+        height: calc(var(--vh) - 48px);
         max-height: 1000px;
         border-radius: 8px;
         padding: 24px 32px 32px;
diff --git a/src/style/pages/_viewer.scss b/src/style/pages/_viewer.scss
index b3c81f9..eee7f4d 100644
--- a/src/style/pages/_viewer.scss
+++ b/src/style/pages/_viewer.scss
@@ -1,7 +1,7 @@
 :global(.photo-page) {
     position: relative;
     width: 100vw;
-    height: 100vh;
+    height: var(--vh);
     display: flex;
     align-items: center;
     overflow: hidden;