fix(mobile): stabilize bottom touchbar across iOS PWA orientation changes

- useMobileKeyboard: add width-based rotation detection to prevent
  visualViewport resize during rotation from being mistaken for keyboard
  events (iOS PWA orientationchange is unreliable)
- TouchBar: simplify to fixed bottom: 0 + fixed height; drop env() lift
  (env(safe-area-inset-bottom) returns 0 post-rotation in iOS PWA)
- TerminalApp: reserve only bar height in terminalArea; remove safe-bottom
  component from layout calcs
- Add --safe-bottom CSS var (default 0) for cross-screen consistency

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: dorlugasigal

src/frontend/src/components/CopilotPane/CopilotPane.module.css

@@ -635,7 +635,7 @@
 .inputBar {
   flex-shrink: 0;
   padding: 8px 16px;
-  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
+  padding-bottom: calc(8px + var(--safe-bottom));
   background: var(--bg);
 }
 

src/frontend/src/components/ResumeBrowser/ResumeBrowser.module.css

@@ -124,7 +124,7 @@
   padding: 0 16px;
   padding-left: max(16px, env(safe-area-inset-left, 0));
   padding-right: max(16px, env(safe-area-inset-right, 0));
-  padding-bottom: max(20px, env(safe-area-inset-bottom, 0));
+  padding-bottom: max(20px, var(--safe-bottom));
   display: flex;
   flex-direction: column;
   gap: 8px;

src/frontend/src/components/SessionsHub/SessionsHub.module.css

@@ -197,7 +197,7 @@
   display: flex;
   flex-direction: column;
   padding: 16px;
-  padding-bottom: calc(80px + min(env(safe-area-inset-bottom, 0px), 2px));
+  padding-bottom: calc(82px + var(--safe-bottom));
   gap: 12px;
 }
 
@@ -242,11 +242,10 @@
 
 .hubFooter {
   position: fixed;
-  bottom: 0;
+  bottom: var(--safe-bottom);
   left: 0;
   right: 0;
-  padding: 8px calc(16px + env(safe-area-inset-left, 0px))
-    calc(8px + min(env(safe-area-inset-bottom, 0px), 2px))
+  padding: 4px calc(16px + env(safe-area-inset-left, 0px)) 4px
     calc(16px + env(safe-area-inset-right, 0px));
   background: var(--bg);
   display: flex;

src/frontend/src/components/SidePanel/SidePanel.module.css

@@ -24,7 +24,7 @@
   overflow: hidden;
   padding-top: env(safe-area-inset-top, 0px);
   padding-left: env(safe-area-inset-left, 0px);
-  padding-bottom: min(env(safe-area-inset-bottom, 0px), 2px);
+  padding-bottom: var(--safe-bottom);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   animation: slide-in-left 0.25s ease-out;
 }

src/frontend/src/components/TerminalApp/TerminalApp.module.css

@@ -180,11 +180,7 @@
 .terminalArea {
   position: absolute;
   top: calc(40px + env(safe-area-inset-top, 0px));
-  /* TouchBar height (71px) + capped home-indicator gap + keyboard height.
-     iOS Safari does not shrink the layout viewport when the keyboard opens,
-     so we must explicitly offset by --keyboard-height (set by
-     useMobileKeyboard via visualViewport). */
-  bottom: calc(71px + min(env(safe-area-inset-bottom, 0px), 2px) + var(--keyboard-height, 0px));
+  bottom: calc(75px + var(--keyboard-height, 0px));
   left: 0;
   right: 0;
   display: flex;
@@ -195,14 +191,13 @@
 /* When the keyboard is open, the touchbar's home-indicator padding is
    covered by the keyboard, so the terminal can sit directly on top of the
    71px touchbar core (above the keyboard). */
+/* Keyboard open: bar drops to sit on keyboard (no safe-area lift). */
 .layout[data-keyboard-open] .terminalArea {
-  bottom: calc(71px + var(--keyboard-height, 0px));
+  bottom: calc(75px + var(--keyboard-height, 0px));
 }
 
-/* Copilot chat hides the TouchBar — reclaim its space (no keyboard offset
-   needed because TerminalPane handles its own resize/scroll-into-view). */
 .layout[data-hide-touchbar] .terminalArea {
-  bottom: calc(min(env(safe-area-inset-bottom, 0px), 2px) + var(--keyboard-height, 0px));
+  bottom: var(--keyboard-height, 0px);
 }
 
 .split {
@@ -269,14 +264,11 @@
   }
   .terminalArea {
     top: calc(32px + env(safe-area-inset-top, 0px));
-    bottom: calc(44px + min(env(safe-area-inset-bottom, 0px), 2px) + var(--keyboard-height, 0px));
+    bottom: calc(48px + var(--keyboard-height, 0px));
   }
-  /* TouchBar hides when keyboard is open in landscape — sit directly on
-     top of the keyboard, no touchbar offset. */
   .layout[data-keyboard-open] .terminalArea {
     bottom: var(--keyboard-height, 0px);
   }
-  /* Copilot chat hides TouchBar — reclaim its space */
   .layout[data-hide-touchbar] .terminalArea {
     bottom: var(--keyboard-height, 0px);
   }

src/frontend/src/components/TouchBar/TouchBar.module.css

@@ -8,10 +8,10 @@
   left: 0;
   right: 0;
   z-index: 50;
-  /* Compact bar height + capped home-indicator gap (saves screen real estate). */
-  height: calc(71px + min(env(safe-area-inset-bottom, 0px), 2px));
-  padding: 3px 4px;
-  padding-bottom: min(env(safe-area-inset-bottom, 0px), 2px);
+  /* Compact bar — fixed height. iOS home-indicator strip below is left
+     visible (env() is unreliable in PWA standalone post-rotation). */
+  height: 75px;
+  padding: 3px 4px 4px;
   transition: bottom 0.15s ease-out;
   background: linear-gradient(to bottom, var(--bg) 0%, var(--surface) 100%);
   display: flex;
@@ -24,29 +24,10 @@
   overscroll-behavior: none;
 }
 
-/* Backfill the area below the TouchBar (the keyboard zone) with --bg so it
-   blends with the dark iOS keyboard chrome. Without this the body bg can
-   leak through gaps around the iOS accessory bar. */
-.touchBar::after {
-  content: '';
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  height: var(--keyboard-height, 0px);
-  background: var(--bg);
-  pointer-events: none;
-}
-
-/* When the keyboard is open, drop the gradient and the keyboard-area
-   backfill — the body bg already paints the area dark, and a plain
-   transparent TouchBar lets the buttons (with their drop shadow) read
-   as floating chips above the keyboard. */
+/* Keyboard open: bar stays put, no special handling needed. */
 :global([data-keyboard-open]) .touchBar {
   background: transparent;
-}
-:global([data-keyboard-open]) .touchBar::after {
-  display: none;
+  bottom: var(--keyboard-height, 0px);
 }
 
 .row {
@@ -70,10 +51,10 @@
   justify-content: center;
   cursor: pointer;
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
     0 1px 0 var(--key-shadow),
-    0 2px 6px rgba(0, 0, 0, 0.45),
-    0 4px 12px rgba(0, 0, 0, 0.35);
+    0 2px 3px rgba(0, 0, 0, 0.55),
+    0 3px 6px rgba(0, 0, 0, 0.4);
   -webkit-tap-highlight-color: transparent;
   font-family: inherit;
   transition: background 0.08s;
@@ -214,9 +195,8 @@
 /* Landscape on short screens: single compact row */
 @media (orientation: landscape) and (max-height: 500px) {
   .touchBar {
-    height: calc(44px + min(env(safe-area-inset-bottom, 0px), 2px));
-    padding: 4px 4px;
-    padding-bottom: min(env(safe-area-inset-bottom, 0px), 2px);
+    height: 48px;
+    padding: 4px;
   }
   .keyBtn {
     height: 28px;

src/frontend/src/hooks/useMobileKeyboard.ts

@@ -23,8 +23,42 @@ export function useMobileKeyboard(): MobileKeyboardState {
     if (!vv) return;
 
     baseHeightRef.current = vv.height;
+    let baseWidth = vv.width;
+
+    // While a rotation is in flight, vv.height changes by hundreds of pixels
+    // and would otherwise be mistaken for a keyboard opening. Suppress resize
+    // events during this window and force a clean baseline afterward.
+    let rotating = false;
+    let rotationTimer: ReturnType<typeof setTimeout> | undefined;
+
+    function startRotation() {
+      rotating = true;
+      // Force a clean state immediately so any stale --keyboard-height clears.
+      setState({ keyboardOpen: false, keyboardHeight: 0 });
+      clearTimeout(rotationTimer);
+      rotationTimer = setTimeout(() => {
+        baseHeightRef.current = vv!.height;
+        baseWidth = vv!.width;
+        rotating = false;
+        // Re-evaluate after rotation settles in case a real keyboard is open.
+        const diff = baseHeightRef.current - vv!.height;
+        const isOpen = diff > KEYBOARD_THRESHOLD;
+        setState({
+          keyboardOpen: isOpen,
+          keyboardHeight: isOpen ? diff : 0,
+        });
+      }, 500);
+    }
 
     function onResize() {
+      // Width change ⇒ this is a rotation, not a keyboard event. iOS PWA
+      // doesn't reliably fire orientationchange, so detect it from the
+      // viewport directly.
+      if (vv!.width !== baseWidth) {
+        startRotation();
+        return;
+      }
+      if (rotating) return;
       const currentHeight = vv!.height;
       const diff = baseHeightRef.current - currentHeight;
       const isOpen = diff > KEYBOARD_THRESHOLD;
@@ -34,16 +68,8 @@ export function useMobileKeyboard(): MobileKeyboardState {
       });
     }
 
-    // On orientation change, the viewport height changes without a keyboard
-    // event. Reset the baseline so the diff calculation stays correct.
-    let orientationTimer: ReturnType<typeof setTimeout> | undefined;
     function onOrientationChange() {
-      // Short delay — browsers need a frame to settle the new viewport size
-      clearTimeout(orientationTimer);
-      orientationTimer = setTimeout(() => {
-        baseHeightRef.current = vv!.height;
-        setState({ keyboardOpen: false, keyboardHeight: 0 });
-      }, 200);
+      startRotation();
     }
 
     vv.addEventListener('resize', onResize);
@@ -56,7 +82,7 @@ export function useMobileKeyboard(): MobileKeyboardState {
     window.addEventListener('orientationchange', onOrientationChange);
 
     return () => {
-      clearTimeout(orientationTimer);
+      clearTimeout(rotationTimer);
       vv.removeEventListener('resize', onResize);
       if (orientation) {
         orientation.removeEventListener('change', onOrientationChange);

src/frontend/src/styles/global.css

@@ -6,6 +6,15 @@
   padding: 0;
 }
 
+:root {
+  /* Bottom safe zone for iOS home-indicator. Default 0; useSafeArea()
+     populates this with the cached env(safe-area-inset-bottom) value so
+     the iOS PWA rotation bug (env() returning 0 post-rotation) can't
+     collapse it. */
+  --safe-bottom: 0px;
+  --safe-top: 0px;
+}
+
 html,
 body {
   height: 100vh;