fix(ui): prevent iOS Safari input auto-zoom

NianJiuZst · vincentkoc · commit b4fc87474911 · 2026-04-28T22:48:27.000-07:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@ Docs: https://docs.openclaw.ai
 - Channels/Discord: remove Discord-owned queued-run timeout replies through the shared channel lifecycle queue while preserving message ordering and compatibility timeout constants, so long Discord turns stay governed by session/tool/runtime lifecycle instead of channel fallback errors. Thanks @codexGW.
 - Agents/tools: clamp `process.poll` waits to 30 seconds, advertise that cap in the tool schema, and honor abort signals while waiting, so long command polls cannot pin agent responsiveness after cancellation. Thanks @vincentkoc.
 - Plugin SDK: add tracked Discord component-message helpers and a Telegram account-resolution compatibility facade, so existing plugins using those subpaths resolve while new plugins stay on generic channel SDK contracts. Thanks @vincentkoc.
+- Control UI: keep chat, shared form, and config text-entry controls at 16px on touch-primary devices so iOS Safari no longer auto-zooms focused fields. Carries forward #64673. Thanks @NianJiuZst.
 - Shared labels: preserve Unicode combining marks and NFC-equivalent accented text in group/channel slug normalization so non-Latin labels no longer lose meaningful characters. Fixes #58932; carries forward #58942 and #58995. Thanks @fengqing-git, @Starhappysh, and @koen666.
 - Docs/Hetzner: clarify that SSH tunnel access requires `AllowTcpForwarding local` before running `ssh -L`, so hardened VPS sshd configs do not block loopback Gateway access. Fixes #54557; carries forward #54564; refs #54954. Thanks @satishkc7, @blackstrype, and @Aftabbs.
 - Gateway/shutdown: report structured shutdown warnings and HTTP close timeout warnings through `ShutdownResult` while preserving lifecycle hook hardening. Carries forward #41296. Thanks @edenfunf.
diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css
@@ -565,6 +565,14 @@
   box-sizing: border-box;
 }
 
+@media (hover: none) and (pointer: coarse) {
+  .chat-compose .chat-compose__field textarea,
+  .agent-chat__input > textarea {
+    /* iOS Safari: inputs < 16px trigger auto-zoom on focus */
+    font-size: 16px;
+  }
+}
+
 .agent-chat__input > textarea:focus-visible {
   box-shadow: none;
 }
diff --git a/ui/src/styles/chat/layout.test.ts b/ui/src/styles/chat/layout.test.ts
@@ -28,4 +28,15 @@ describe("chat layout styles", () => {
     expect(css).toContain("font-size: 20px;");
     expect(css).toContain("place-items: center;");
   });
+
+  it("keeps chat textareas at 16px without misplaced stylelint suppression", () => {
+    const css = readLayoutCss();
+
+    expect(css).toContain("font-size: 14px;");
+    expect(css).toContain("font-size: 0.92rem;");
+    expect(css).toMatch(
+      /@media \(hover: none\) and \(pointer: coarse\) \{[\s\S]*\.chat-compose \.chat-compose__field textarea,[\s\S]*\.agent-chat__input > textarea \{[\s\S]*font-size: 16px;/,
+    );
+    expect(css).not.toContain("stylelint-disable-next-line declaration-property-allowed-list");
+  });
 });
diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
@@ -900,6 +900,15 @@
   box-shadow: var(--focus-ring);
 }
 
+@media (hover: none) and (pointer: coarse) {
+  .field input,
+  .field textarea,
+  .field select {
+    /* iOS Safari: inputs < 16px trigger auto-zoom on focus */
+    font-size: 16px;
+  }
+}
+
 .field select {
   appearance: none;
   padding-right: 36px;
diff --git a/ui/src/styles/components.test.ts b/ui/src/styles/components.test.ts
@@ -14,4 +14,12 @@ describe("agent fallback chip styles", () => {
     expect(css).toContain("outline-offset: 2px;");
     expect(css).toContain(".agent-chip-input .chip-remove:disabled");
   });
+
+  it("keeps touch-primary field controls large enough to avoid iOS focus zoom", () => {
+    const css = readFileSync(path.join(process.cwd(), "ui/src/styles/components.css"), "utf8");
+
+    expect(css).toMatch(
+      /@media \(hover: none\) and \(pointer: coarse\) \{[\s\S]*\.field input,[\s\S]*\.field textarea,[\s\S]*\.field select \{[\s\S]*font-size: 16px;/,
+    );
+  });
 });
diff --git a/ui/src/styles/config.css b/ui/src/styles/config.css
@@ -1316,6 +1316,21 @@
   border-color: var(--border);
 }
 
+@media (hover: none) and (pointer: coarse) {
+  .config-search__input,
+  .settings-theme-import__input,
+  .config-raw-field textarea,
+  .cfg-input,
+  .cfg-input--sm,
+  .cfg-textarea,
+  .cfg-textarea--sm,
+  .cfg-number__input,
+  .cfg-select {
+    /* iOS Safari: inputs < 16px trigger auto-zoom on focus */
+    font-size: 16px;
+  }
+}
+
 /* Segmented Control */
 .cfg-segmented {
   display: inline-flex;
diff --git a/ui/src/styles/config.test.ts b/ui/src/styles/config.test.ts
@@ -0,0 +1,25 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+
+describe("config styles", () => {
+  it("keeps touch-primary config text controls large enough to avoid iOS focus zoom", () => {
+    const css = readFileSync(path.join(process.cwd(), "ui/src/styles/config.css"), "utf8");
+
+    expect(css).toContain("@media (hover: none) and (pointer: coarse)");
+    for (const selector of [
+      ".config-search__input",
+      ".settings-theme-import__input",
+      ".config-raw-field textarea",
+      ".cfg-input",
+      ".cfg-input--sm",
+      ".cfg-textarea",
+      ".cfg-textarea--sm",
+      ".cfg-number__input",
+      ".cfg-select",
+    ]) {
+      expect(css).toContain(selector);
+    }
+    expect(css).toContain("font-size: 16px;");
+  });
+});

Original file line number	Diff line number	Diff line change
`@@ -565,6 +565,14 @@`
`565`	`565`	`box-sizing: border-box;`
`566`	`566`	`}`
`567`	`567`
	`568`	`+@media (hover: none) and (pointer: coarse) {`
	`569`	`+ .chat-compose .chat-compose__field textarea,`
	`570`	`+ .agent-chat__input > textarea {`
	`571`	`+ /* iOS Safari: inputs < 16px trigger auto-zoom on focus */`
	`572`	`+ font-size: 16px;`
	`573`	`+ }`
	`574`	`+}`
	`575`	`+`
`568`	`576`	`.agent-chat__input > textarea:focus-visible {`
`569`	`577`	`box-shadow: none;`
`570`	`578`	`}`