Skip to content

[Responsive] LoginPage 375px — 14px input font-size triggers iOS Safari auto-zoom on focus #190

Description

@Ryan-Atkinson87

Severity: major

Breakpoint

Mobile — 375px viewport width (iOS Safari)

Steps to reproduce

  1. Open the login page on iOS Safari (or DevTools iPhone emulation)
  2. Tap the password input to focus it
  3. Observe the viewport zoom

Expected behaviour

The page does not zoom when the input is focused.

Actual behaviour

iOS Safari automatically zooms the page when a focused <input> has font-size less than 16px. The password input uses text-sm (14px), which triggers this behaviour. The auto-zoom jumps the viewport and is disorienting; users often cannot easily zoom back out.

Fix

Add text-base (16px) to the input, or override via:

<input
  className="w-full rounded border border-gray-300 px-3 py-2 text-sm md:text-sm text-base focus:outline-none focus:ring-2 focus:ring-gray-900"
  ...
/>

Or more simply, ensure the input has font-size: 16px on mobile:

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

(Uses 16px on mobile, 14px on sm+, matching the visual style at larger sizes.)

Location

orchestrator-ui/src/auth/LoginPage.tsx<input type="password" className="... text-sm ...">

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions