From 21cab0b4a66a42e0d5076d0d5ddc201f12c6d287 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Mon, 10 Apr 2023 01:51:50 +0900
Subject: [PATCH] - added JS detection of window.innerHeight to index.html -
 changed all vh and vw to svh and svw

---
 public/index.html |  9 ++++++
 public/style.css  | 79 +++++++++++++++++++++++------------------------
 2 files changed, 48 insertions(+), 40 deletions(-)

diff --git a/public/index.html b/public/index.html
index 533ec4a80a..46a2e81b58 100644
--- a/public/index.html
+++ b/public/index.html
@@ -16,6 +16,15 @@
     <link rel="apple-touch-icon" sizes="114x114" href="img/apple-icon-114x114.png" />
     <link rel="apple-touch-icon" sizes="144x144" href="img/apple-icon-144x144.png" />
 
+    <script>
+        const documentHeight = () => {
+            const doc = document.documentElement
+            doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
+        }
+        window.addEventListener('resize', documentHeight)
+        documentHeight()
+    </script>
+
     <script src="scripts/jquery-3.5.1.min.js"></script>
     <script src="scripts/jquery.transit.min.js"></script>
     <script src="scripts/jquery-cookie-1.4.1.min.js"></script>
diff --git a/public/style.css b/public/style.css
index e173dc4b88..ea17bb60d9 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,6 +1,7 @@
 @charset "UTF-8";
 
 :root {
+    --doc-height: 100%;
     --transparent: rgba(0, 0, 0, 0);
 
     --black30a: rgba(0, 0, 0, 0.3);
@@ -55,7 +56,10 @@ body {
     margin: 0;
     padding: 0;
     width: 100%;
-    height: 100%;
+    /*fallback for JS load*/
+    height: 100svh;
+    /*defaults as 100%, then reassigned via JS as pixels*/
+    height: var(--doc-height);
     background-color: var(--greyCAIbg);
     background-repeat: no-repeat;
     background-attachment: fixed;
@@ -546,7 +550,7 @@ textarea {
     font-size: 1rem;
     line-height: 1.5rem;
     min-height: calc(1.5em + 0.75rem + 2px);
-    max-height: 50vh;
+    max-height: 50svh;
     word-wrap: break-word;
     height: 40px;
     resize: vertical;
@@ -938,7 +942,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     display: flex;
     flex-wrap: wrap;
     width: calc(var(--sheldWidth) - 100px);
-    max-width: 100vw;
+    max-width: 100svw;
     justify-content: space-evenly;
 }
 
@@ -1113,7 +1117,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     left: 0;
     right: 0;
     text-align: center;
-    margin-top: 36vh;
+    margin-top: 36svh;
     box-shadow: 0 0 2px var(--black50a);
     padding: 4px;
     backdrop-filter: blur(10px);
@@ -1231,7 +1235,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     opacity: 0.0;
     position: absolute;
     width: 100%;
-    height: 100vh;
+    height: 100svh;
     z-index: 9999;
     top: 0;
 }
@@ -1244,14 +1248,14 @@ input[type=search]:focus::-webkit-search-cancel-button {
     opacity: 1.0;
     position: absolute;
     width: 100%;
-    height: 100vh;
+    height: 100svh;
     z-index: 2298;
 }
 
 #bgtest {
     display: none;
-    width: 100vw;
-    height: 100vh;
+    width: 100svw;
+    height: 100svh;
     position: absolute;
     z-index: -100;
     background-color: red;
@@ -1819,7 +1823,7 @@ input[type="range"]::-webkit-slider-thumb {
     opacity: 0.0;
     position: absolute;
     width: 100%;
-    height: 100vh;
+    height: 100svh;
     z-index: 2055;
     background-color: var(--black70a);
 }
@@ -1927,7 +1931,7 @@ input[type="range"]::-webkit-slider-thumb {
     opacity: 1.0;
     position: absolute;
     width: 100%;
-    height: 100vh;
+    height: 100svh;
     z-index: 2058;
 }
 
@@ -1939,7 +1943,7 @@ input[type="range"]::-webkit-slider-thumb {
     grid-template-rows: 50px 100px 100px 100px auto;
     grid-gap: 10px;
     max-width: var(--sheldWidth);
-    height: calc(100vh - 40px);
+    height: calc(100svh - 40px);
     position: absolute;
     z-index: 3002;
     margin-left: auto;
@@ -2023,7 +2027,7 @@ input[type="range"]::-webkit-slider-thumb {
     opacity: 1.0;
     position: absolute;
     width: 100%;
-    height: 100vh;
+    height: 100svh;
     z-index: 3001;
     top: 0;
     backdrop-filter: blur(10px);
@@ -2035,7 +2039,7 @@ input[type="range"]::-webkit-slider-thumb {
     grid-template-rows: auto auto;
     max-width: var(--sheldWidth);
     height: min-content;
-    max-height: calc(100vh - 40px);
+    max-height: calc(100svh - 40px);
     min-height: 100px;
     position: absolute;
     z-index: 2066;
@@ -2691,9 +2695,9 @@ a {
 /* ############################################################# */
 
 #right-nav-panel {
-    width: calc((100vw - var(--sheldWidth) - 2px) /2);
+    width: calc((100svw - var(--sheldWidth) - 2px) /2);
     /* min-width: 450px; */
-    height: 100vh;
+    height: 100svh;
     position: fixed;
     top: 0;
     margin: 0;
@@ -2709,7 +2713,7 @@ a {
     border: 0;
     border-left: 1px solid var(--grey30a);
     border-bottom: 1px solid var(--grey30a);
-    max-height: 100vh;
+    max-height: 100svh;
     box-shadow: none;
     border-radius: 0 0 0 20px;
     overflow-y: hidden;
@@ -3017,9 +3021,9 @@ label[for="extensions_autoconnect"] {
 }
 
 .fillLeft {
-    max-width: calc((100vw - var(--sheldWidth) - 2px) /2);
-    height: 100vh;
-    max-height: 100vh;
+    max-width: calc((100svw - var(--sheldWidth) - 2px) /2);
+    height: 99.9svh;
+    max-height: 99.9svh;
     position: fixed;
     top: 0;
     margin: 0;
@@ -3148,15 +3152,12 @@ label[for="extensions_autoconnect"] {
         position: fixed;
         touch-action: none;
         overflow: hidden;
-        height: 100vh;
-        width: 100vw;
-        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
     }
 
     .drawer-content {
         min-width: unset;
-        width: 100vw;
-        max-height: calc(100vh - 45px);
+        width: 100svw;
+        max-height: calc(100svh - 45px);
         position: fixed;
         left: 0;
         top: 5px;
@@ -3170,7 +3171,7 @@ label[for="extensions_autoconnect"] {
     }
 
     #top-settings-holder {
-        width: 100vw;
+        width: 100svw;
         position: fixed;
 
     }
@@ -3185,7 +3186,7 @@ label[for="extensions_autoconnect"] {
     #world_popup {
         /*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/
         height: calc(100svh - 45px);
-        width: 100vw;
+        width: 100svw;
         margin: 0 auto;
         margin-left: 0px;
         position: fixed;
@@ -3218,8 +3219,8 @@ label[for="extensions_autoconnect"] {
     #left-nav-panel {
         height: calc(100svh - 45px);
         min-width: 0px;
-        width: 100vw;
-        max-width: 100vw;
+        width: 100svw;
+        max-width: 100svw;
         overflow-y: auto;
         border-left: 1px solid var(--grey30);
         border-right: 1px solid var(--grey30);
@@ -3246,10 +3247,10 @@ label[for="extensions_autoconnect"] {
     }
 
     #character_popup {
-        width: calc(100vw - 5px);
+        width: calc(100svw - 5px);
         border-radius: 0 0 0 20px;
         margin-top: -35px;
-        height: calc(100vh - 30px);
+        height: calc(100svh - 30px);
     }
 
 
@@ -3295,14 +3296,12 @@ label[for="extensions_autoconnect"] {
         position: fixed;
         touch-action: none;
         overflow: hidden;
-        height: 100vh;
-        width: 100vw;
     }
 
     .drawer-content {
         min-width: unset;
-        width: 100vw;
-        max-height: calc(100vh - 45px);
+        width: 100svw;
+        max-height: calc(100svh - 45px);
         position: fixed;
         left: 0;
         top: 5px;
@@ -3316,7 +3315,7 @@ label[for="extensions_autoconnect"] {
     }
 
     #top-settings-holder {
-        width: 100vw;
+        width: 100svw;
         position: fixed;
 
     }
@@ -3331,7 +3330,7 @@ label[for="extensions_autoconnect"] {
     #world_popup {
         /*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/
         height: calc(100svh - 45px);
-        width: 100vw;
+        width: 100svw;
         margin: 0 auto;
         margin-left: 0px;
         position: fixed;
@@ -3364,8 +3363,8 @@ label[for="extensions_autoconnect"] {
     #left-nav-panel {
         height: calc(100svh - 45px);
         min-width: 0px;
-        width: 100vw;
-        max-width: 100vw;
+        width: 100svw;
+        max-width: 100svw;
         overflow-y: auto;
         border-left: 1px solid var(--grey30);
         border-right: 1px solid var(--grey30);
@@ -3392,10 +3391,10 @@ label[for="extensions_autoconnect"] {
     }
 
     #character_popup {
-        width: calc(100vw - 5px);
+        width: calc(100svw - 5px);
         border-radius: 0 0 0 20px;
         margin-top: -35px;
-        height: calc(100vh - 30px);
+        height: calc(100svh - 30px);
     }