From d8c03e9af547f695d280c341673336f64f1dea70 Mon Sep 17 00:00:00 2001
From: fullstack-engineer <fullstack-engineer@agents.moleculesai.app>
Date: Sun, 17 May 2026 10:31:56 -0700
Subject: [PATCH] fix(canvas-mobile): chat composer font-size to 16px to stop
 iOS focus-zoom
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On the mobile PWA, tapping into the chat input scaled the whole
viewport up. Root cause: iOS Safari/WebKit auto-zooms on focus when
the focused field's effective font-size is < 16px. The mobile chat
composer <textarea> (MobileChat.tsx) used fontSize: 14.5.

Fix is the root-cause one: raise the composer font to 16px. This
suppresses the focus-zoom WITHOUT a maximum-scale / user-scalable
viewport lock, so pinch-to-zoom accessibility is preserved. The app
has no viewport export (Next.js default width=device-width,
initial-scale=1) — intentionally left untouched.

Adds a regression test asserting the composer font-size is >= 16px.
---
 canvas/src/components/mobile/MobileChat.tsx        |  9 ++++++++-
 .../mobile/__tests__/MobileChat.test.tsx           | 14 ++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/canvas/src/components/mobile/MobileChat.tsx b/canvas/src/components/mobile/MobileChat.tsx
index 375bd37a8..8a7226d22 100644
--- a/canvas/src/components/mobile/MobileChat.tsx
+++ b/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",
diff --git a/canvas/src/components/mobile/__tests__/MobileChat.test.tsx b/canvas/src/components/mobile/__tests__/MobileChat.test.tsx
index 7a0a8ca12..1601d0bd0 100644
--- a/canvas/src/components/mobile/__tests__/MobileChat.test.tsx
+++ b/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 ─────────────────────────────────────────────────────────────────────
-- 
2.52.0