From b99b2e715d98a143641272514a17fdd6203fcd94 Mon Sep 17 00:00:00 2001
From: arcticfly <41524992+arcticfly@users.noreply.github.com>
Date: Mon, 10 Jul 2023 12:15:09 -0700
Subject: [PATCH] Dynamically resize viewport height on mobile (#31)

---
 src/components/nav/AppShell.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/nav/AppShell.tsx b/src/components/nav/AppShell.tsx
index 576a3a0..89e239b 100644
--- a/src/components/nav/AppShell.tsx
+++ b/src/components/nav/AppShell.tsx
@@ -19,6 +19,7 @@ import { useRouter } from "next/router";
 import PublicPlaygroundWarning from "../PublicPlaygroundWarning";
 import { type IconType } from "react-icons";
 import { RiFlaskLine } from "react-icons/ri";
+import { useState, useEffect } from "react";
 
 type IconLinkProps = BoxProps & LinkProps & { label: string; icon: IconType; href: string };
 
@@ -84,9 +85,28 @@ const NavSidebar = () => {
 };
 
 export default function AppShell(props: { children: React.ReactNode; title?: string }) {
+  const [vh, setVh] = useState("100vh"); // Default height to prevent flicker on initial render
+
+  useEffect(() => {
+    const setHeight = () => {
+      const vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty("--vh", `${vh}px`);
+      setVh(`calc(var(--vh, 1vh) * 100)`);
+    };
+    setHeight(); // Set the height at the start
+
+    // Listen to resize events
+    window.addEventListener("resize", setHeight);
+
+    // Remove event listener on cleanup
+    return () => {
+      window.removeEventListener("resize", setHeight);
+    };
+  }, []);
+
   return (
     <Grid
-      h="100vh"
+      h={vh}
       w="100vw"
       templateColumns={{ base: "56px minmax(0, 1fr)", md: "200px minmax(0, 1fr)" }}
       templateRows="max-content 1fr"