mirror of
https://github.com/MarekWo/mc-webui.git
synced 2026-10-30 23:51:57 +01:00
MarekWoandClaude Opus 5
8ce57f2868
iOS WebKit zooms the whole page when a focused form control computes to under 16px. `#messageInput` was 0.9rem (14.4px) on narrow screens, so every tap on the message box tripped it - reported on iPhone in both Safari and Chrome, on a phone with no configuration of its own. The zoom also never undid itself: the shell is `height: 100dvh; overflow: hidden`, so WebKit has nothing to scroll back and leaves the page scaled until the user pinches out. Raise every focusable control to 16px on (pointer: coarse), which also covers landscape phones wider than the 768px breakpoint. Desktop keeps Bootstrap's smaller sizing. The guard uses !important on purpose: it has to outrank page-local <style> blocks that load after style.css and reach specificities like `.filter-sort-toolbar .form-select`. Fields that only open a picker (checkbox, radio, range, color, file, buttons) are excluded - they never trigger the zoom. The contacts toolbar was the one layout that could not take the bump: three 16px selects overflow one unwrapped flex row, clipping the sort control, so it now wraps. Verified locally at 390x844 and 932x430 with touch emulation: no control under 16px on any route, no horizontal overflow, desktop unchanged. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>