From d12e270eefafa74a4b34449b5126fbbe63e37f10 Mon Sep 17 00:00:00 2001
From: p0wen <Philly.e@hotmail.de>
Date: Tue, 29 Sep 2020 18:44:16 +0000
Subject: [PATCH] Fix height styling for mobile browser view

---
 assets/css/style.css     | 13 ++++++++++++-
 assets/js/scripts/app.js |  5 +++++
 index.html               |  3 +--
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 6a3fe61..e92b6ad 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,11 +1,22 @@
 /* Main Page */
+.html {
+    height: 100%;
+    --vh: 614px;
+}
+
+@supports(padding: max(0px)) {
+    .post {
+        padding-left: max(12px, env(safe-area-inset-left));
+        padding-right: max(12px, env(safe-area-inset-right));
+    }
+}
 
 .appview {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
-    height: 100vh;
+    height: calc(100 * var(--vh));;
     z-index: -1;
 }
 .app {
diff --git a/assets/js/scripts/app.js b/assets/js/scripts/app.js
index 5758085..8d8ebaf 100644
--- a/assets/js/scripts/app.js
+++ b/assets/js/scripts/app.js
@@ -20,6 +20,11 @@ if ("serviceWorker" in navigator) {
   });
 }
 
+window.addEventListener('resize', () => { 
+  document.querySelector(':root').style
+    .setProperty('--vh', window.innerHeight/100 + 'px');
+})
+
 //get today's date for all kinds of function
 let currentHour = new Date().getHours();
 let currDate = new Date();
diff --git a/index.html b/index.html
index bd08a78..53408d8 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,7 @@
       href="assets/media/img/favicon_io/zenapple.png"
     />
     <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
     <meta name="apple-mobile-web-app-title" content="ZenGarden" />
     <meta
@@ -302,7 +303,5 @@ <h5 class="modal-title">Congratulations</h5>
       crossorigin="anonymous"
     ></script>
     <script src="assets/js/scripts/app.js"></script>
-    <!-- Load Tests -->
-    <script src="assets/js/specs/appSpecs.js"></script>
   </body>
 </html>