Add fix for wayward mobile viewports

hackgvl · Oct 17, 2023 · 67bdd4f · 67bdd4f
1 parent 711a57a
commit 67bdd4f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Greenville OpenMapData</title>
   </head>
-  <body class="bg-slate-900 text-slate-300 h-screen w-screen m-0 p-0">
-    <div id="app" class="h-screen w-screen" />
+  <body class="bg-slate-900 text-slate-300 h-full-screen w-screen m-0 p-0">
+    <div id="app" class="h-full w-screen" />
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite --port 4173",
+    "dev:host": "vite --port 4173 --host",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
     "test:unit": "vitest --environment jsdom --root src/ --watch=false",

diff --git a/src/assets/style.css b/src/assets/style.css
@@ -6,3 +6,8 @@
   @apply underline hover:text-white active:text-white;
   @apply transition-all duration-300 ease-in-out;
 }
+
+/* Workaround for mobile viewports */
+.h-full-screen {
+  @apply fixed h-full overscroll-none;
+}