Fixing iOS Auto-Zoom on Form Inputs

Release: v0.1.164 · Ticket: MOB-17 · Category: Typography & Spacing

The Problem

Anyone filling in a form on an iPhone — adding a tenancy, searching through the filter toolbar, or signing in — will have experienced the page unexpectedly zooming in as soon as they tapped an input field. This is a long-standing iOS Safari behaviour: whenever a focused input element has a font-size smaller than 16px, the browser automatically zooms the viewport to make the text more readable.

Across the app, form inputs were styled with Tailwind's text-sm utility class, which resolves to 14px. That single pixel threshold was all it took to trigger the zoom on every form interaction on iPhone.

Affected areas

Area	Inputs affected
AddTenancySlideOver	All text, date, and select inputs
Onboarding form steps	All input fields
Filter toolbar	Search input
Sign-in form	Email and password fields

The Fix

The solution is straightforward: ensure no form control falls below the 16px threshold.

All <input>, <select>, and <textarea> elements have been updated to use text-base, Tailwind's utility for font-size: 1rem (16px). This meets the minimum size iOS Safari requires to suppress automatic zoom, while remaining visually consistent with the rest of the UI.

/* Equivalent global rule — the standard cross-platform fix */
input, select, textarea {
  font-size: 1rem;
}

Impact

• No more unexpected viewport zoom when tapping into any form field on iPhone.
• Layout integrity is preserved throughout form interactions on iOS Safari.
• No visual regression on desktop or Android — 16px is a comfortable, readable size across all platforms.

Affected File

• src/app/dashboard/tenancies/tenancies-list.tsx