Mobile Fix: Stopping iOS Auto-Zoom in the Manual Transaction Form

Release: v1.0.121 Affects: iOS Safari & iOS Chrome · Manual Transaction Form

What Was Happening

When using the manual transaction entry form on an iPhone or iPad, tapping into any of the form fields — amount, date, description, category, or notes — would cause the entire page to zoom in automatically. This is a well-known iOS browser behaviour: Safari (and Chrome on iOS) automatically zooms the viewport whenever a user focuses an <input>, <select>, or <textarea> whose computed font size is below 16px.

The form was using Tailwind's text-sm utility class throughout, which renders at 14px — just under the threshold — triggering the zoom on every single field tap.

Affected Fields

Field	Element	Previous Class	Issue
Amount	`<input type="number">`	`text-sm`	Auto-zoom on focus
Date	`<input type="date">`	`text-sm`	Auto-zoom on focus
Description	`<input type="text">`	`text-sm`	Auto-zoom on focus
Category	`<select>`	`text-sm`	Auto-zoom on focus
Notes	`<textarea>`	`text-sm`	Auto-zoom on focus

What Was Changed

All form controls in src/app/dashboard/transactions/manual-transaction-form.tsx were updated from text-sm to text-base sm:text-sm.

<!-- Before -->
<input class="... text-sm" />

<!-- After -->
<input class="... text-base sm:text-sm" />

This ensures:

On mobile (< sm breakpoint): Font size renders at 1rem / 16px — at or above the iOS zoom threshold.
On tablet and desktop (sm and above): Font size reverts to text-sm (14px), preserving the intended compact visual design.

Alternative: Global CSS Fix

If you are self-hosting or maintaining a fork, a global approach can be applied in globals.css to prevent this class of issue across all form controls site-wide:

@layer base {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

This sets a baseline font size for all native form elements, ensuring iOS never triggers the auto-zoom behaviour regardless of which Tailwind utility classes are applied.

Related Fix

This is the same iOS auto-zoom issue previously resolved in PropertyForm. The root cause and fix strategy are identical — text-sm inputs below 16px triggering viewport zoom on focus in iOS browsers.

File changed: src/app/dashboard/transactions/manual-transaction-form.tsx