Add mobile navigation offset synchronization and improve layout handling

Author: sebastianhaeni

src/app/gameRenderer.ts

@@ -103,6 +103,8 @@ export function createGameRenderer({
     initLocVisual();
     initTeamVisual();
     initMobileNav();
+    syncMobileNavOffset();
+    window.addEventListener("resize", syncMobileNavOffset);
     codeBackground.init();
     managementPanels.init();
     setMobileScreen("play");
@@ -205,6 +207,7 @@ export function createGameRenderer({
   function setMobileScreen(screenId: MobileScreenId): void {
     activeMobileScreen = screenId;
     elements.shell.setAttribute("data-mobile-screen", screenId);
+    syncMobileNavOffset();
 
     elements.mobileNav
       .querySelectorAll<HTMLButtonElement>("button[data-screen-id]")
@@ -215,6 +218,11 @@ export function createGameRenderer({
       });
   }
 
+  function syncMobileNavOffset(): void {
+    const navHeight = elements.mobileNav.offsetHeight || 76;
+    elements.shell.style.setProperty("--mobile-nav-offset", `${navHeight + 20}px`);
+  }
+
   function render(state: GameState): void {
     const nowMs = Date.now();
     audio.setMusicRunning(!isGameOver(state));

src/lib/css/styles.css

@@ -185,6 +185,7 @@ body.alarm-tech-debt::after {
   width: min(1450px, 100%);
   height: 100%;
   position: relative;
+  --mobile-nav-offset: 96px;
   -webkit-user-select: none;
   user-select: none;
 }
@@ -1418,8 +1419,10 @@ input {
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
-    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
-    scroll-padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
+    padding-bottom: calc(var(--mobile-nav-offset) + env(safe-area-inset-bottom));
+    scroll-padding-bottom: calc(
+      var(--mobile-nav-offset) + env(safe-area-inset-bottom) + 12px
+    );
     -webkit-overflow-scrolling: touch;
   }