Fixing iOS Auto-Zoom on Form Inputs

Release: v0.1.62 · MOB-17

The Problem

When using the platform on an iPhone or iPad, tapping into any form field — the people search bar, the Add Person form, the API key settings field, match review notes, or filter dropdowns — caused iOS Safari to automatically zoom the page in. After finishing with the field the page stayed zoomed, forcing users to manually pinch-zoom back out before continuing.

This is a well-known iOS Safari behaviour: the browser zooms the viewport whenever a focused <input> or <textarea> has a computed font-size below 16px. All form inputs in the application were set to text-sm (14px), consistently triggering the zoom on every interaction.

The Fix

The solution is straightforward: raise input font sizes to at least 16px (text-base in Tailwind). Two locations were updated:

1. AccessibleInput component

src/components/ui/accessible-form.tsx is the shared component used by the majority of form fields across the app. Its className was updated:

- w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ...
+ w-full rounded-lg border border-input bg-background px-3 py-2 text-base ...

This single change covers the Add Person form, settings API key form, and match review notes textarea in one go.

2. Direct inputs on the People page

people/page.tsx contains a search <input> and one or more <select> filter elements that are styled directly rather than via AccessibleInput. These were updated individually:

- className="... text-sm ..."
+ className="... text-base ..."

Affected Surfaces

Surface	Component / File
Add Person form	AccessibleInput
Settings — API key form	AccessibleInput
Match review notes textarea	AccessibleInput
People search input	people/page.tsx (direct)
People filter selects	people/page.tsx (direct)

Why 16px?

iOS Safari's zoom threshold is a hard browser-level rule: any focused input with font-size < 16px triggers automatic viewport scaling. There is no CSS meta-tag or JavaScript workaround that reliably prevents this without also disabling intentional user zoom. The only robust fix is ensuring all inputs meet the 16px minimum — which aligns with WCAG 2.1 SC 1.4.4 (Resize Text) recommendations anyway.

Visual Impact

Input text increases from 14px to 16px. This is a minor size change and is consistent with the surrounding body text. No layout or spacing changes are included in this release.