Define vh CSS variable from viewport height

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">

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;

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;