From dfe141b406f43eb60d0c961198181e3e0ac7147b Mon Sep 17 00:00:00 2001 From: boban Date: Sun, 14 Jun 2026 14:20:36 +0200 Subject: [PATCH] fix(ui): stop iOS zoom-on-focus by forcing 16px inputs on touch devices MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit iOS Safari zooms the viewport when a focused form control's font-size is < 16px. The dense design uses text-xs/sm/[11px] on inputs, which triggered the zoom on every input across the app. Add one unlayered media query forcing 16px on input/textarea/select for touch-primary devices (@media (pointer: coarse)) — covering phones AND tablets of any size (incl. 1024/1366px iPad Pro that a width cap would miss) while keeping the small desktop sizing for mouse pointers. Unlayered so it wins over Tailwind's utility classes. Verified via touch emulation: inputs render 16px on phone/iPad/iPad-Pro widths (matchMedia(pointer:coarse)=true) and stay 14px on mouse desktops at any width. Co-Authored-By: Claude Opus 4.8 (1M context) --- resources/css/app.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/resources/css/app.css b/resources/css/app.css index a89a383..e24042a 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -161,3 +161,19 @@ font-variant-numeric: tabular-nums; } } + +/* ── Touch devices: no zoom-on-focus ────────────────────────────────────── + iOS Safari zooms the viewport when a focused form control's font-size is + < 16px. The dense design uses text-xs/sm/[11px] on inputs, which triggers it. + Target by POINTER, not width: `pointer: coarse` matches touch-primary devices + (phones + tablets of ANY size — incl. a 1024px/1366px iPad Pro that a width cap + would miss) and excludes mouse desktops, so the small desktop sizing is kept. + UNLAYERED on purpose — it must win over Tailwind's utility layer (the text-* + classes in the markup). Excludes controls whose font-size cannot trigger zoom. */ +@media (pointer: coarse) { + input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']), + textarea, + select { + font-size: 16px; + } +}