fix viewport on mobile for gamepad and dashboard

Author: thelamer

addons/selkies-dashboard/src/components/Sidebar.jsx

@@ -583,6 +583,20 @@ function Sidebar({ isOpen }) {
     };
   }, []);
 
+  useEffect(() => {
+    const setRealViewportHeight = () => {
+      const vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+    };
+    window.addEventListener('resize', setRealViewportHeight);
+    window.addEventListener('orientationchange', setRealViewportHeight);
+    setRealViewportHeight();
+    return () => {
+      window.removeEventListener('resize', setRealViewportHeight);
+      window.removeEventListener('orientationchange', setRealViewportHeight);
+    };
+  }, []);
+
   const { t, raw } = translator;
   const sendKeyEvent = (type, key, code, modifierState) => {
     const event = new KeyboardEvent(type, {

addons/selkies-dashboard/src/styles/Overlay.css

@@ -89,7 +89,7 @@
   top: 0;
   left: 0;
   width: 280px;
-  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background-color: var(--sidebar-bg);
   box-shadow: 2px 0 5px var(--sidebar-shadow);
   transform: translateX(-100%);

addons/universal-touch-gamepad/universalTouchGamepad.js

@@ -7,7 +7,7 @@
     const MAX_AXES = 4;
     const PREVIEW_SCALE = 0.15;
 
-    const SAFE_AREA_PADDING = { top: 10, right: 15, bottom: 20, left: 15 };
+    const SAFE_AREA_PADDING = { top: 10, right: 15, bottom: 10, left: 15 };
     const HIT_TEST_SLOP = 10;
 
     const STICK_TAP_DURATION_THRESHOLD = 250;
@@ -53,6 +53,14 @@
         </svg>
     `;
 
+    function setRealViewportHeight() {
+      const vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+    }
+    window.addEventListener('resize', setRealViewportHeight);
+    window.addEventListener('orientationchange', setRealViewportHeight);
+    setRealViewportHeight();
+
     let hostAnchorElement = null;
     let currentProfileName = 'eightBit';
     let isGamepadVisible = false;
@@ -673,7 +681,7 @@
         isProfileSelectorVisible = true;
         profileSelectorOverlayElement = document.createElement('div');
         Object.assign(profileSelectorOverlayElement.style, {
-            position: 'fixed', top: '0', left: '0', width: '100vw', height: '100vh',
+            position: 'fixed', top: '0', left: '0', width: '100vw', height: 'calc(var(--vh, 1vh) * 100)',
             backgroundColor: 'rgba(0, 0, 0, 0.75)',
             display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
             zIndex: '2147483640', pointerEvents: 'auto',
@@ -767,7 +775,7 @@
             gamepadControlsOverlayElement.id = 'universal-touch-gamepad-controls-overlay';
             Object.assign(gamepadControlsOverlayElement.style, {
                 position: 'fixed', top: '0', left: '0',
-                width: '100vw', height: '100vh',
+                width: '100vw', height: 'calc(var(--vh, 1vh) * 100)',
                 zIndex: '2000',
                 pointerEvents: 'none',
                 overflow: 'hidden'