canvas/src/components/mobile/MobileChat.tsx

@@ -703,7 +703,14 @@ export function MobileChat({
               border: "none",
               outline: "none",
               background: "transparent",
-              fontSize: 14.5,
+              // 16px floor: iOS Safari/WebKit auto-zooms the viewport on
+              // focus when a focused field's font-size is < 16px. Anything
+              // below this re-introduces the tap-to-zoom layout jump on the
+              // mobile PWA. Do NOT lower this without also adding a
+              // maximum-scale/user-scalable viewport lock — and that lock
+              // breaks pinch-to-zoom accessibility, so 16px here is the
+              // correct trade.
+              fontSize: 16,
               lineHeight: 1.4,
               color: p.text,
               padding: "6px 0",

canvas/src/components/mobile/__tests__/MobileChat.test.tsx

@@ -249,6 +249,20 @@ describe("MobileChat — composer", () => {
     const sendBtn = container.querySelector('[aria-label="Send"]') as HTMLButtonElement;
     expect(sendBtn.disabled).toBe(true);
   });
+
+  // iOS Safari/WebKit auto-zooms the viewport on focus when a focused
+  // <input>/<textarea> has an effective font-size below 16px. On the
+  // mobile PWA this made the whole layout scale up the moment the user
+  // tapped into the chat box. Keeping the composer font ≥16px is the
+  // root-cause fix — it suppresses the focus-zoom WITHOUT disabling
+  // pinch-to-zoom (which a maximum-scale/user-scalable viewport hack
+  // would have done at the cost of accessibility).
+  it("composer textarea font-size is >= 16px (prevents iOS focus-zoom)", () => {
+    const { container } = renderChat(mockAgentId);
+    const textarea = container.querySelector("textarea") as HTMLTextAreaElement;
+    const fontSizePx = parseFloat(textarea.style.fontSize);
+    expect(fontSizePx).toBeGreaterThanOrEqual(16);
+  });
 });
 
 // ─── Tabs ─────────────────────────────────────────────────────────────────────