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 + // /