fix(app): apply safe-area sizing to iOS home-screen apps (#46703)

packages/app/src/entry.tsx

@@ -73,6 +73,7 @@ if (root instanceof HTMLElement && root.dataset.opencodeMounted === undefined) {
     const auth = authFromToken(new URLSearchParams(location.search).get("auth_token"))
     clearAuthToken()
     const standalone = isStandalone()
+    root.dataset.standalone = String(standalone)
     if (standalone) restorePwaRoute()
     const server: ServerConnection.Http = {
       type: "http",

packages/app/src/index.css

@@ -32,6 +32,11 @@
   }
 }
 
+/* iOS can report navigator.standalone without matching display-mode. */
+#root[data-standalone="true"] {
+  height: 100vh;
+}
+
 @layer components {
   [data-slot="session-side-panel-presence"][data-opened="true"] {
     animation: terminal-panel-presence-in 240ms cubic-bezier(0.22, 1, 0.36, 1);

packages/app/test-browser/pwa-route.test.ts

@@ -19,6 +19,18 @@ test("normal browser windows are not standalone", () => {
   expect(isStandalone()).toBe(false)
 })
 
+test("detects iOS home-screen apps when the standalone media query does not match", () => {
+  const descriptor = Object.getOwnPropertyDescriptor(navigator, "standalone")
+  Object.defineProperty(navigator, "standalone", { configurable: true, value: true })
+  try {
+    expect(window.matchMedia("(display-mode: standalone)").matches).toBe(false)
+    expect(isStandalone()).toBe(true)
+  } finally {
+    if (descriptor) Object.defineProperty(navigator, "standalone", descriptor)
+    if (!descriptor) Reflect.deleteProperty(navigator, "standalone")
+  }
+})
+
 test("restores the last PWA route including query and hash without adding history", () => {
   window.history.replaceState({ retained: true }, "", "http://localhost/")
   const length = window.history.length