From facc7c5836e9f071ccf7d544ff197f56f120eea2 Mon Sep 17 00:00:00 2001
From: Brendonovich <14191578+Brendonovich@users.noreply.github.com>
Date: Fri, 11 Sep 2026 13:59:22 +0000
Subject: [PATCH] fix(app): prevent iOS input zoom without resizing controls

---
 packages/app/index.html                  |  1 +
 packages/app/vite.js                     | 15 ++++++
 packages/cli/src/services/web-ui.ts      | 10 ++--
 packages/cli/test/web-ui.test.ts         | 14 +++++-
 packages/enterprise/src/entry-server.tsx |  2 +
 packages/ui/package.json                 |  1 +
 packages/ui/src/ios-input-zoom.ts        | 61 ++++++++++++++++++++++++
 packages/ui/src/styles/base.css          | 19 --------
 8 files changed, 97 insertions(+), 26 deletions(-)
 create mode 100644 packages/ui/src/ios-input-zoom.ts

diff --git a/packages/app/index.html b/packages/app/index.html
index e07a15b4121e..0e21e8cdf506 100644
--- a/packages/app/index.html
+++ b/packages/app/index.html
@@ -6,6 +6,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1, interactive-widget=resizes-content, viewport-fit=cover"
     />
+    <script id="oc-ios-input-zoom-script"></script>
     <title>OpenCode</title>
     <link rel="icon" type="image/x-icon" href="%OPENCODE_FAVICON%" />
     <link rel="apple-touch-icon" sizes="180x180" href="%OPENCODE_APPLE_TOUCH_ICON%" />
diff --git a/packages/app/vite.js b/packages/app/vite.js
index bb0348937765..d031688ce7df 100644
--- a/packages/app/vite.js
+++ b/packages/app/vite.js
@@ -2,6 +2,7 @@ import { readFileSync } from "node:fs"
 import solidPlugin from "vite-plugin-solid"
 import tailwindcss from "@tailwindcss/vite"
 import { fileURLToPath } from "url"
+import { IOS_INPUT_ZOOM_SCRIPT } from "@opencode/ui/ios-input-zoom"
 
 const theme = fileURLToPath(new URL("./public/oc-theme-preload.js", import.meta.url))
 const themeScript = readFileSync(theme, "utf8")
@@ -50,6 +51,13 @@ export default [
       }
     },
   },
+  {
+    name: "opencode-desktop:ios-input-zoom",
+    transformIndexHtml: {
+      order: "pre",
+      handler: inlineIosInputZoom,
+    },
+  },
   {
     name: "opencode-desktop:theme-preload",
     transformIndexHtml: {
@@ -61,6 +69,13 @@ export default [
   solidPlugin(),
 ]
 
+export function inlineIosInputZoom(html) {
+  return html.replace(
+    /<script id="oc-ios-input-zoom-script"><\/script>/,
+    `<script id="oc-ios-input-zoom-script">${IOS_INPUT_ZOOM_SCRIPT}</script>`,
+  )
+}
+
 export function inlineThemePreload(html) {
   return html.replace(
     /<script id="oc-theme-preload-script" src="(?:\.\/|\/)oc-theme-preload\.js"><\/script>/,
diff --git a/packages/cli/src/services/web-ui.ts b/packages/cli/src/services/web-ui.ts
index 56c55991a2c5..e620a95c71be 100644
--- a/packages/cli/src/services/web-ui.ts
+++ b/packages/cli/src/services/web-ui.ts
@@ -54,15 +54,15 @@ function isRouteNotFound(error: unknown) {
   return error instanceof HttpServerError.HttpServerError && error.reason._tag === "RouteNotFound"
 }
 
-function csp(hash = "") {
-  return `default-src 'self'; script-src 'self' 'wasm-unsafe-eval'${hash ? ` 'sha256-${hash}'` : ""}; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: blob:; font-src 'self' data:; media-src 'self' data:; connect-src * data: blob:`
+function csp(hashes: string[] = []) {
+  return `default-src 'self'; script-src 'self' 'wasm-unsafe-eval'${hashes.map((hash) => ` 'sha256-${hash}'`).join("")}; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: blob:; font-src 'self' data:; media-src 'self' data:; connect-src * data: blob:`
 }
 
 function cspForHtml(body: string) {
-  const match = body.match(
-    /<script\b(?![^>]*\bsrc\s*=)[^>]*\bid=(["'])oc-theme-preload-script\1[^>]*>([\s\S]*?)<\/script>/i,
+  const scripts = body.matchAll(
+    /<script\b(?![^>]*\bsrc\s*=)[^>]*\bid=(["'])oc-(?:theme-preload|ios-input-zoom)-script\1[^>]*>([\s\S]*?)<\/script>/gi,
   )
-  return csp(match ? createHash("sha256").update(match[2]).digest("base64") : "")
+  return csp(Array.from(scripts, (match) => createHash("sha256").update(match[2]).digest("base64")))
 }
 
 export * as WebUi from "./web-ui"
diff --git a/packages/cli/test/web-ui.test.ts b/packages/cli/test/web-ui.test.ts
index a5a71dc3f74b..e24f2ffc5926 100644
--- a/packages/cli/test/web-ui.test.ts
+++ b/packages/cli/test/web-ui.test.ts
@@ -2,8 +2,9 @@ import { NodeFileSystem, NodeHttpServer } from "@effect/platform-node"
 import { afterAll, describe, expect, test } from "bun:test"
 import { Effect } from "effect"
 import { HttpServer, HttpServerError, HttpServerRequest, HttpServerResponse } from "effect/unstable/http"
-import { createServer } from "node:http"
+import { createHash } from "node:crypto"
 import { mkdtemp, rm, writeFile } from "node:fs/promises"
+import { createServer } from "node:http"
 import { tmpdir } from "node:os"
 import path from "node:path"
 import { WebUi } from "../src/services/web-ui"
@@ -15,7 +16,11 @@ describe("web UI", () => {
   test("falls back from API routes to assets and the SPA index", async () => {
     const index = path.join(root, "index.html")
     const asset = path.join(root, "app.js")
-    await writeFile(index, "<html><body>embedded</body></html>")
+    const inline = ["theme()", "iosInputZoom()"]
+    await writeFile(
+      index,
+      `<html><head><script id="oc-theme-preload-script">${inline[0]}</script><script id="oc-ios-input-zoom-script">${inline[1]}</script></head><body>embedded</body></html>`,
+    )
     await writeFile(asset, "console.log('embedded')")
     const assets = {
       "index.html": await Bun.file(index).text(),
@@ -83,6 +88,11 @@ describe("web UI", () => {
           expect(yield* Effect.promise(() => fallback.text())).toContain("embedded")
           expect(fallback.headers.get("content-security-policy")).toContain("default-src 'self'")
           expect(fallback.headers.get("content-security-policy")).toContain("connect-src * data: blob:")
+          inline.forEach((script) =>
+            expect(fallback.headers.get("content-security-policy")).toContain(
+              `'sha256-${createHash("sha256").update(script).digest("base64")}'`,
+            ),
+          )
 
           const dotted = yield* Effect.promise(() => fetch(`${origin}/workspace/example.js`))
           expect(dotted.status).toBe(200)
diff --git a/packages/enterprise/src/entry-server.tsx b/packages/enterprise/src/entry-server.tsx
index 076ff7e9b812..53673001e724 100644
--- a/packages/enterprise/src/entry-server.tsx
+++ b/packages/enterprise/src/entry-server.tsx
@@ -1,6 +1,7 @@
 // @refresh reload
 import { createHandler, StartServer } from "@solidjs/start/server"
 import { getRequestEvent } from "solid-js/web"
+import { IOS_INPUT_ZOOM_SCRIPT } from "@opencode/ui/ios-input-zoom"
 
 export default createHandler(() => (
   <StartServer
@@ -23,6 +24,7 @@ export default createHandler(() => (
           <head>
             <meta charset="utf-8" />
             <meta name="viewport" content="width=device-width, initial-scale=1" />
+            <script id="oc-ios-input-zoom-script" innerHTML={IOS_INPUT_ZOOM_SCRIPT} />
             <title>OpenCode</title>
             <meta name="theme-color" content="#F8F7F7" />
             {assets}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index b1d08b9064df..d18b84adce26 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -71,6 +71,7 @@
     "./*": "./src/components/*.tsx",
     "./i18n/*": "./src/i18n/*.ts",
     "./hooks": "./src/hooks/index.ts",
+    "./ios-input-zoom": "./src/ios-input-zoom.ts",
     "./context": "./src/context/index.ts",
     "./context/*": "./src/context/*.tsx",
     "./storybook/scaffold": "./src/storybook/scaffold.tsx",
diff --git a/packages/ui/src/ios-input-zoom.ts b/packages/ui/src/ios-input-zoom.ts
new file mode 100644
index 000000000000..f34860eaf178
--- /dev/null
+++ b/packages/ui/src/ios-input-zoom.ts
@@ -0,0 +1,61 @@
+export const IOS_INPUT_ZOOM_SCRIPT = `(function () {
+  if (!/iPhone|iPod/.test(navigator.userAgent)) return;
+  var root = document.documentElement;
+  if (root.hasAttribute("data-ios-input-zoom")) return;
+  root.setAttribute("data-ios-input-zoom", "");
+  var OWN = "data-ios-input-zoom-meta";
+  var own = null;
+  function sources() {
+    var list = document.querySelectorAll('meta[name="viewport"]');
+    var out = [];
+    for (var i = 0; i < list.length; i++) {
+      if (!list[i].hasAttribute(OWN)) out.push(list[i]);
+    }
+    return out;
+  }
+  function derive(content) {
+    var parts = content.split(",");
+    var kept = [];
+    for (var i = 0; i < parts.length; i++) {
+      var part = parts[i].trim();
+      if (part && part.split("=")[0].trim() !== "maximum-scale") kept.push(part);
+    }
+    kept.push("maximum-scale=1");
+    return kept.join(", ");
+  }
+  function apply() {
+    var metas = sources();
+    for (var i = 0; i < metas.length; i++) {
+      if (metas[i].getAttribute("data-ios-input-zoom") === "keep") {
+        if (own && own.parentNode) {
+          own.parentNode.removeChild(own);
+          metas[i].setAttribute("content", metas[i].getAttribute("content") || "");
+        }
+        return;
+      }
+    }
+    var last = metas.length ? metas[metas.length - 1] : null;
+    var content = derive(last ? last.getAttribute("content") || "" : "");
+    if (!own) {
+      own = document.createElement("meta");
+      own.setAttribute("name", "viewport");
+      own.setAttribute(OWN, "");
+    }
+    if (document.head.lastElementChild !== own) document.head.appendChild(own);
+    own.setAttribute("content", content);
+  }
+  apply();
+  new MutationObserver(function (records) {
+    for (var i = 0; i < records.length; i++) {
+      if (records[i].target !== own) {
+        apply();
+        return;
+      }
+    }
+  }).observe(document.head, {
+    attributeFilter: ["content", "data-ios-input-zoom"],
+    attributes: true,
+    childList: true,
+    subtree: true,
+  });
+})();`
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index ee222399021d..5ae118daba7b 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -388,22 +388,3 @@ input:where([type="button"], [type="reset"], [type="submit"]),
 [hidden]:where(:not([hidden="until-found"])) {
   display: none !important;
 }
-
-/*
-  Prevent iOS Safari from auto-zooming on input focus.
-  iOS WebKit zooms on any input with font-size < 16px as an accessibility feature.
-*/
-
-@media (hover: none) and (pointer: coarse) {
-  input,
-  select,
-  textarea,
-  [contenteditable="true"] {
-    font-size: 16px !important;
-  }
-
-  input::placeholder,
-  textarea::placeholder {
-    font-size: 13px;
-  }
-}