From f733e39b4a0f837140a2375a67d5ae60f8652548 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Thu, 7 May 2026 22:59:41 +0200
Subject: [PATCH] fix(mobile): suppress iOS Safari auto-zoom on every input +
 contenteditable

iOS Safari auto-zooms (and shifts the viewport right) on focus when the
computed font-size is <16px. Single @media (max-width: 767px) block in
globals.css covers all four input tiers, every relevant bare <input>
type, <textarea>, <select>, and contenteditable surfaces. `!important`
is required because Tailwind utilities (text-[15px] on the chat composer,
text-sm on form fields) emit after @layer components and would otherwise
override the input-tier rules.

Replaces ad-hoc per-input `text-base md:text-sm` overrides with a single
global truth. New inputs/contenteditables get the fix for free.

Spec: docs/systems/design-system.md gains an "iOS Auto-Zoom Suppression"
section under Input Tiers.
---
 docs/systems/design-system.md       |  8 ++++++++
 packages/web/src/styles/globals.css | 30 +++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/docs/systems/design-system.md b/docs/systems/design-system.md
index 52d5c177..6518dc73 100644
--- a/docs/systems/design-system.md
+++ b/docs/systems/design-system.md
@@ -96,6 +96,14 @@ All defined in `globals.css`. No resting border — sunken `surface-input` backg
 
 Override padding/size with utilities: `input-standard w-full py-2.5`
 
+### iOS Auto-Zoom Suppression
+
+iOS Safari auto-zooms (and shifts the viewport right) on input focus when the computed `font-size` is below 16px. The `@media (max-width: 767px)` block in `globals.css` bumps every input tier — and bare `<input>`/`<textarea>`/`<select>` plus `[contenteditable]` — to `font-size: 16px !important`.
+
+`!important` is required because Tailwind utilities like `text-[15px]` (used on the chat composer textarea) and `text-sm` (used on form fields) are emitted in the `@layer utilities` block, which comes after `@layer components` in the cascade and would otherwise override the input-tier rules. There is no legitimate reason to use a `<16px` font-size on a mobile input, so the override is universally correct.
+
+When introducing a new input or contenteditable surface, no extra work is needed — the global rule covers it.
+
 ---
 
 ## Layout
diff --git a/packages/web/src/styles/globals.css b/packages/web/src/styles/globals.css
index 3b32be01..e27e9e41 100644
--- a/packages/web/src/styles/globals.css
+++ b/packages/web/src/styles/globals.css
@@ -244,6 +244,36 @@
            focus:ring-2 focus:ring-accent-rose focus:border-accent-rose/30
            transition-colors;
   }
+
+  /* iOS Safari auto-zooms on input focus when computed font-size is below
+     16px. Bumping every input tier (and bare <input>/<textarea>/<select>)
+     to 16px on mobile prevents the zoom without changing desktop sizing.
+     `!important` is required because Tailwind utilities (e.g. `text-[15px]`
+     on the chat composer textarea, `text-sm` on form fields) are emitted in
+     the @layer utilities block — which comes after @layer components in the
+     cascade — so they would otherwise override these rules.
+     There is no legitimate reason to use a <16px font-size on a mobile
+     input; the override is universally correct. */
+  @media (max-width: 767px) {
+    .input-standard,
+    .input-search,
+    .input-embedded,
+    .input-danger,
+    input[type="text"],
+    input[type="password"],
+    input[type="email"],
+    input[type="number"],
+    input[type="search"],
+    input[type="tel"],
+    input[type="url"],
+    input[type="datetime-local"],
+    textarea,
+    select,
+    [contenteditable="true"],
+    [contenteditable="plaintext-only"] {
+      font-size: 16px !important;
+    }
+  }
 }
 
 /* Accessibility: fall back to solid surfaces when transparency is reduced */