Fix mobile screen funkiness by smashing it with a big hammer Fixes #2879

2b10954002147fdd684d066a61140781eaa68fa9

Cohee <18619528+Cohee1207@users.noreply.github.com>

public/css/mobile-styles.css+8 -9 Viewed

         touch-action: none;
         overflow: hidden;
         position: fixed;
+    }
     .world_entry_form_control {

     .drawer-content {
         min-width: unset;
-        width: 100%;
+        width: 100dvw;
         max-height: calc(100vh - 45px);
         max-height: calc(100dvh - 45px);
         position: fixed;

     #sheld,
     #character_popup,
     .drawer-content {
-        width: 100% !important;
+        width: 100dvw !important;
         margin: 0 auto;
-        max-width: 100%;
+        max-width: 100dvw;
         left: 0 !important;
         resize: none !important;
         top: var(--topBarBlockSize);

         /* 100vh are fallback units for browsers that don't support dvh */
         height: calc(100vh - 45px);
         height: calc(100dvh - 45px);
-        min-width: 100% !important;
+        min-width: 100dvw !important;
-        width: 100% !important;
+        width: 100dvw !important;
-        max-width: 100% !important;
+        max-width: 100dvw !important;
         overflow-y: hidden;
         border-left: 1px solid var(--SmartThemeBorderColor);
         border-right: 1px solid var(--SmartThemeBorderColor);

         margin: 0 auto;
         height: calc(100vh - 70px);
         height: calc(100dvh - 70px);
-        width: calc(100% - 5px);
+        width: calc(100dvw - 5px);
         max-height: calc(100vh - 70px);
         max-height: calc(100dvh - 70px);
-        max-width: calc(100% - 5px);
+        max-width: calc(100dvw - 5px);
+    }

public/scripts/RossAscends-mods.js+10 -0 Viewed

         RA_autoconnect();
+    }
+    if (isMobile()) {
+        const fixFunkyPositioning = () => {
+            console.debug('[Mobile] Device viewport change detected.');
+            document.documentElement.style.position = 'fixed';
+            requestAnimationFrame(() => document.documentElement.style.position = '');
+        };
+        window.addEventListener('resize', fixFunkyPositioning);
+        window.addEventListener('orientationchange', fixFunkyPositioning);
+    }
     $('#main_api').change(function () {
         var PrevAPI = main_api;
         setTimeout(() => RA_autoconnect(PrevAPI), 100);