fix(login): keep inputs >=16px on touch so iOS doesn't zoom on focus (#1632)

The login page has its own inline <style> and doesn't load static/style.css,
so it never inherited the main app's touch-device rule that pins text inputs
to 16px. Its fields are 0.95rem (~15.2px) and the dynamically-inserted 2FA
input is 14px, so iOS Safari zooms the whole page when either is focused -
on the very first screen every user sees.

Add a `@media (hover: none) and (pointer: coarse)` rule raising
`input:not(.remember-check)` to 16px, mirroring the main app's approach.
!important also lifts the 2FA input, which pins font-size:14px inline.
Desktop is unchanged (inputs stay 0.95rem).
This commit is contained in:
Mahdi Salmanzade
2026-06-03 09:23:24 +04:00
committed by GitHub
parent 9bd11fd6e7
commit cbf8103cba

View File

@@ -150,6 +150,14 @@
color: var(--fg); font-size: 0.95rem; font-family: 'Fira Code', monospace;
}
input:focus { outline: none; border-color: var(--red); }
/* On touch devices keep inputs at >=16px so iOS Safari doesn't zoom the whole
page when a field is focused (it auto-zooms any focused input under 16px).
This page has its own inline styles, so it doesn't inherit the main app's
equivalent rule in static/style.css; mirror it here. !important also lifts
the dynamically-inserted 2FA input, which pins font-size:14px inline. */
@media (hover: none) and (pointer: coarse) {
input:not(.remember-check) { font-size: 16px !important; }
}
/* Clear, visible focus ring for keyboard users on every focusable control. */
input:focus-visible, a:focus-visible, button:focus-visible {
outline: 2px solid var(--red);