fix for full screen on mobile

Author: Rafnuss

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen bg-[color:var(--ink)] text-[color:var(--cream)]">
+  <div class="app-root bg-[color:var(--ink)] text-[color:var(--cream)]">
     <header class="fixed inset-x-0 top-0 z-30">
       <div class="mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-4">
         <div class="flex items-center gap-3">

src/style.css

@@ -15,6 +15,8 @@
 body {
   margin: 0;
   min-height: 100vh;
+  min-height: 100svh;
+  min-height: 100dvh;
   font-family: "Sora", "IBM Plex Sans", "SF Pro Text", sans-serif;
   background: var(--ink);
   color: var(--cream);
@@ -24,6 +26,8 @@ body {
 
 #app {
   min-height: 100vh;
+  min-height: 100svh;
+  min-height: 100dvh;
 }
 
 ::-webkit-scrollbar {
@@ -45,10 +49,18 @@ body {
   background: rgba(255, 255, 255, 0.35);
 }
 
+.app-root {
+  min-height: 100vh;
+  min-height: 100svh;
+  min-height: 100dvh;
+}
+
 .map-root {
   position: relative;
-  width: 100vw;
+  width: 100%;
   height: 100vh;
+  height: 100svh;
+  height: 100dvh;
   overflow: hidden;
 }