From f03df109726884028e8061abf38dc3f90b039ed2 Mon Sep 17 00:00:00 2001
From: Jaezmien Naejara <jaezmien.naejara@gmail.com>
Date: Sun, 9 Jul 2023 14:02:40 +0800
Subject: [PATCH] Add viewport fallback to small viewport sizes

---
 public/style.css | 53 +++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 52 insertions(+), 1 deletion(-)

diff --git a/public/style.css b/public/style.css
index ae87fefe2..3410082a2 100644
--- a/public/style.css
+++ b/public/style.css
@@ -85,6 +85,7 @@ body {
     padding: 0;
     width: 100%;
     /*fallback for JS load*/
+	height: 100vh;
     height: 100svh;
     /*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/
     height: calc(var(--doc-height) - 1px);
@@ -352,10 +353,12 @@ hr {
 #sheld {
     display: grid;
     grid-template-rows: auto min-content;
+    height: calc(100vh - 42px);
     height: calc(100svh - 42px);
     overflow-x: hidden;
     max-width: 800px;
     position: absolute;
+    left: calc((100vw - var(--sheldWidth))/2);
     left: calc((100svw - var(--sheldWidth))/2);
     top: 41px;
     margin: 0 auto;
@@ -891,6 +894,7 @@ select {
 
 #send_textarea {
     min-height: 40px;
+    max-height: 50vh;
     max-height: 50svh;
     word-wrap: break-word;
     height: 40px;
@@ -1453,6 +1457,7 @@ body.big-avatars .ch_description {
     display: flex;
     flex-wrap: wrap;
     width: calc(var(--sheldWidth) - 10px);
+    max-width: 100vw;
     max-width: 100svw;
     justify-content: center;
 }
@@ -1760,6 +1765,7 @@ grammarly-extension {
 
 #dialogue_popup {
     width: 500px;
+    max-width: 90vw;
     max-width: 90svw;
     position: absolute;
     z-index: 9999;
@@ -1775,6 +1781,7 @@ grammarly-extension {
     padding: 4px;
     background-color: var(--black30a);
     border-radius: 10px;
+    max-height: 90vh;
     max-height: 90svh;
     display: flex;
     flex-direction: column;
@@ -1782,11 +1789,14 @@ grammarly-extension {
 }
 
 .large_dialogue_popup {
+    height: 90vh !important;
     height: 90svh !important;
+    max-width: 90vw !important;
     max-width: 90svw !important;
 }
 
 .wide_dialogue_popup {
+    max-width: 90vh !important;
     max-width: 90svh !important;
     width: fit-content !important;
 }
@@ -1903,6 +1913,7 @@ grammarly-extension {
     opacity: 0.0;
     position: absolute;
     width: 100%;
+    height: 100vh;
     height: 100svh;
     z-index: 9999;
     top: 0;
@@ -1910,7 +1921,9 @@ grammarly-extension {
 
 #bgtest {
     display: none;
+    width: 100vw;
     width: 100svw;
+    height: 100vh;
     height: 100svh;
     position: absolute;
     z-index: -100;
@@ -2436,6 +2449,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);
@@ -2578,6 +2592,7 @@ input[type="range"]::-webkit-slider-thumb {
     opacity: 1.0;
     position: absolute;
     width: 100%;
+    height: 100vh;
     height: 100svh;
     z-index: 2058;
 }
@@ -2590,8 +2605,11 @@ input[type="range"]::-webkit-slider-thumb {
 
     min-width: 100px;
     max-width: var(--sheldWidth);
+    height: calc(100vh - 84px);
     height: calc(100svh - 84px);
+    min-height: calc(100vh - 84px);
     min-height: calc(100svh - 84px);
+    max-height: calc(100vh - 84px);
     max-height: calc(100svh - 84px);
     position: absolute;
     z-index: 3002;
@@ -2670,6 +2688,7 @@ h5 {
     opacity: 1.0;
     position: absolute;
     width: 100%;
+    height: 100vh;
     height: 100svh;
     z-index: 3001;
     top: 0;
@@ -2683,6 +2702,7 @@ h5 {
     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;
@@ -3552,11 +3572,14 @@ a {
     display: block;
     overflow-wrap: break-word;
     white-space: normal;
+    max-width: calc(((100vw - 500px) / 2) - 10px);
     max-width: calc(((100svw - 500px) / 2) - 10px);
     position: absolute;
     z-index: 9999;
+    max-height: 90vh;
     max-height: 90svh;
     /*unsure why, but this prevents scrollbars*/
+    height: 49vh;
     height: 49svh;
 
     padding: 5px;
@@ -3591,8 +3614,11 @@ a {
 /* ############################################################# */
 
 #right-nav-panel {
+    width: calc((100vw - var(--sheldWidth) - 2px) /2);
     width: calc((100svw - var(--sheldWidth) - 2px) /2);
+    max-height: calc(100vh - 42px);
     max-height: calc(100svh - 42px);
+    height: calc(100vh - 42px);
     height: calc(100svh - 42px);
     position: fixed;
     top: 0;
@@ -3652,6 +3678,7 @@ a {
 .mes_img {
     border-radius: 10px;
     max-width: 100%;
+    max-height: 40vh;
     max-height: 40svh;
     image-rendering: -webkit-optimize-contrast;
 }
@@ -3914,6 +3941,7 @@ label[for="extensions_autoconnect"] {
     min-width: 450px;
     width: var(--sheldWidth);
     overflow-y: auto;
+    max-height: calc(100vh - 70px);
     max-height: calc(100svh - 70px);
     display: none;
     position: absolute;
@@ -3937,8 +3965,11 @@ label[for="extensions_autoconnect"] {
 }
 
 .fillLeft {
+    width: calc((100vw - var(--sheldWidth) - 2px) /2);
     width: calc((100svw - var(--sheldWidth) - 2px) /2);
+    height: calc(100vh - 42px);
     height: calc(100svh - 42px);
+    max-height: calc(100vh - 42px);
     max-height: calc(100svh - 42px);
     position: fixed;
     top: 0;
@@ -4357,6 +4388,7 @@ body.waifuMode #top-bar {
 }
 
 body.waifuMode #sheld {
+    height: 40vh;
     height: 40svh;
     top: calc(100% - 40vh);
     bottom: 0;
@@ -4540,7 +4572,9 @@ body.waifuMode .zoomed_avatar {
         top: 50px;
         aspect-ratio: 2 / 3;
         width: fit-content;
+        max-height: calc(60vh - 60px);
         max-height: calc(60svh - 60px);
+        max-width: 90vw;
         max-width: 90svw;
     }
 
@@ -4591,6 +4625,7 @@ body.waifuMode .zoomed_avatar {
     .drawer-content {
         min-width: unset;
         width: 100%;
+        max-height: calc(100vh - 45px);
         max-height: calc(100svh - 45px);
         position: fixed;
         left: 0;
@@ -4608,12 +4643,15 @@ body.waifuMode .zoomed_avatar {
     #top-bar {
         position: fixed;
         padding-top: 8px;
+        width: 100vw;
         width: 100svw;
     }
 
     #bg1,
     #bg_custom {
+        height: 100vh !important;
         height: 100svh !important;
+        width: 100vw !important;
         width: 100svw !important;
         background-position: center;
 
@@ -4627,6 +4665,7 @@ body.waifuMode .zoomed_avatar {
     /* ,
     #world_popup  */
         {
+        max-height: calc(100vh - 40px);
         max-height: calc(100svh - 40px);
         width: 100% !important;
         margin: 0 auto;
@@ -4685,6 +4724,7 @@ body.waifuMode .zoomed_avatar {
     #right-nav-panel,
     #left-nav-panel,
     #floatingPrompt {
+        height: calc(100vh - 45px);
         height: calc(100svh - 45px);
         min-width: 100% !important;
         width: 100% !important;
@@ -4748,7 +4788,9 @@ body.waifuMode .zoomed_avatar {
     }
 
     body.waifuMode #sheld {
+        height: 40vh;
         height: 40svh;
+        top: 60vh;
         top: 60svh;
         bottom: 0 !important;
     }
@@ -4775,13 +4817,16 @@ body.waifuMode .zoomed_avatar {
 
     body.waifuMode .zoomed_avatar {
         width: fit-content;
+        max-height: calc(60vh - 60px);
         max-height: calc(60svh - 60px);
+        max-width: 90vw;
         max-width: 90svw;
     }
 
     .scrollableInner {
         overflow-y: auto;
         overflow-x: hidden;
+        max-height: calc(100vh - 90px);
         max-height: calc(100svh - 90px);
     }
 
@@ -4807,7 +4852,9 @@ body.waifuMode .zoomed_avatar {
     body:not(.waifuMode) .zoomed_avatar {
 
         width: fit-content;
+        max-height: calc(60vh - 60px);
         max-height: calc(60svh - 60px);
+        max-width: 90vw;
         max-width: 90svw;
     }
 }
@@ -4872,7 +4919,9 @@ body.waifuMode .zoomed_avatar {
         max-width: unset;
         min-height: unset;
         max-height: unset;
+        width: 100vw;
         width: 100svw;
+        height: calc(100vh - 40px);
         height: calc(100svh - 40px);
         padding-right: max(env(safe-area-inset-right), 0px);
         padding-left: max(env(safe-area-inset-left), 0px);
@@ -4902,8 +4951,10 @@ body.waifuMode .zoomed_avatar {
         right: 0;
         top: 0;
         margin: 0 auto;
+        height: calc(100vh - 70px);
         height: calc(100svh - 70px);
         width: calc(100% - 5px);
+        max-height: calc(100vh - 70px);
         max-height: calc(100svh - 70px);
         max-width: calc(100% - 5px);
 
@@ -5058,4 +5109,4 @@ body.waifuMode .zoomed_avatar {
     background-color: var(--SmartThemeBlurTintColor);
     text-align: center;
     line-height: 14px;
-}
\ No newline at end of file
+}