From a874b900aa84d001d0638e15a9776a93e090f186 Mon Sep 17 00:00:00 2001
From: Megha Goyal <goyamegh@amazon.com>
Date: Sun, 7 Jun 2026 07:10:29 +0000
Subject: [PATCH] fix: keep iOS UI inside the visual viewport
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes a few mobile/iOS layout problems visible on iPhone Safari:

- Status bar's right-most buttons (session bucket flag, settings gear)
  could be pushed off-screen on narrow viewports because the cwd path
  refused to shrink enough. Hide `.statusPath` on `max-width: 700px`,
  cap the title width, and add `overflow: hidden` to `.statusBar` as a
  defensive guard so a stubborn child can't punt the right side of the
  header off-screen.

- Composer footer (and the send button in particular) could be clipped
  at the right edge on iOS. This happens when iOS Safari programmatically
  scrolls the document while focusing the textarea, even though body has
  `overflow: hidden`. Snap any stray window scroll back to (0,0) inside
  `syncAppHeight`, and constrain the composer / footer to
  `calc(100vw - 20px)` on mobile so it physically can't overflow.

- Add `padding-top: max(10px, env(safe-area-inset-top))` to the mobile
  `.app` so the status bar is not flush with the iOS notch / dynamic
  island in standalone (Add to Home Screen) mode. Apply the same safe-
  area treatment to the expanded composer's `inset`.

- Use `100dvh` for `--app-height` where supported, with the existing JS
  visualViewport sync still acting as the source of truth at runtime.
  This avoids a brief mis-sized layout on first paint before the JS
  height sync runs.

- Add `overscroll-behavior: none` to html/body so iOS rubber-band
  scrolling doesn't reveal blank chrome behind the app.

No tests added — this is purely CSS / layout glue. `npm run typecheck`,
`npm run test:unit`, and `npm run build` all pass.

Signed-off-by: Megha Goyal <goyamegh@amazon.com>
---
 src/app/elements.ts       |  8 ++++++++
 src/styles/base.css       |  7 +++++++
 src/styles/responsive.css | 28 ++++++++++++++++++++++++++++
 src/styles/statusBar.css  |  3 +++
 4 files changed, 46 insertions(+)

diff --git a/src/app/elements.ts b/src/app/elements.ts
index e7a4453..b34f015 100644
--- a/src/app/elements.ts
+++ b/src/app/elements.ts
@@ -125,6 +125,14 @@ export function getAppElements(): AppElements {
 export function syncAppHeight() {
   const height = window.visualViewport?.height || window.innerHeight;
   document.documentElement.style.setProperty("--app-height", `${height}px`);
+  // iOS Safari can scroll the document body when focusing an input near the
+  // bottom of the viewport (keyboard appearance). With our fixed-height,
+  // overflow:hidden layout that just leaves part of the UI — e.g. the
+  // composer footer or send button — visually clipped at the edges of the
+  // visual viewport. Snap any stray scroll back to the top.
+  if (window.scrollY !== 0 || window.scrollX !== 0) {
+    window.scrollTo(0, 0);
+  }
 }
 
 export function initAppHeightSync() {
diff --git a/src/styles/base.css b/src/styles/base.css
index 43cab97..83ca280 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -14,12 +14,19 @@
   --app-height: 100vh;
 }
 
+@supports (height: 100dvh) {
+  :root { --app-height: 100dvh; }
+}
+
 * { box-sizing: border-box; }
 html, body {
   width: 100%;
   max-width: 100%;
   height: var(--app-height);
   overflow: hidden;
+  /* iOS Safari sometimes scrolls the html element when an input is focused
+     even with body { overflow: hidden }. Lock scroll position explicitly. */
+  overscroll-behavior: none;
 }
 body {
   margin: 0;
diff --git a/src/styles/responsive.css b/src/styles/responsive.css
index 338c555..ae5683c 100644
--- a/src/styles/responsive.css
+++ b/src/styles/responsive.css
@@ -29,14 +29,42 @@
     height: var(--app-height);
     min-height: 0;
     padding: 10px 0;
+    padding-top: max(10px, env(safe-area-inset-top));
     padding-bottom: max(10px, env(safe-area-inset-bottom));
   }
   .composer {
     margin: 0 10px;
     margin-bottom: max(0px, env(safe-area-inset-bottom));
+    /* Defensive: never let the composer (or its footer) overflow the
+       viewport horizontally on iOS, where keyboard / focus-scroll quirks
+       can otherwise clip the send button at the right edge. */
+    max-width: calc(100vw - 20px);
+    min-width: 0;
+  }
+  .composerFooter {
+    min-width: 0;
+    max-width: 100%;
+  }
+  /* Expanded composer needs to respect safe-area insets on iOS too. */
+  .composer.expanded {
+    inset: max(10px, env(safe-area-inset-top))
+           max(10px, env(safe-area-inset-right))
+           max(10px, env(safe-area-inset-bottom))
+           max(10px, env(safe-area-inset-left));
   }
   .message.user { margin: 12px 10px 12px 0; }
 
+  /* On narrow phone screens the cwd is too long and pushes the right-side
+     status-bar buttons (bucket, settings) off-screen. Hide it on mobile;
+     the working directory is still surfaced via the empty-state chooser
+     and the session list. */
+  .statusPath {
+    display: none;
+  }
+  .statusTitle {
+    max-width: min(60vw, 240px);
+  }
+
   .contextMeterLabel {
     top: -13px;
     right: 0;
diff --git a/src/styles/statusBar.css b/src/styles/statusBar.css
index 5b0092e..1a36f71 100644
--- a/src/styles/statusBar.css
+++ b/src/styles/statusBar.css
@@ -7,6 +7,9 @@
   padding: 0 8px;
   height: 24px;
   flex-shrink: 0;
+  /* Prevent right-side buttons (settings, bucket, …) from being pushed
+     off-screen on narrow viewports if a child refuses to shrink. */
+  overflow: hidden;
 }
 .statusBar .iconButton {
   flex: 0 0 auto;