manohar/tia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix mobile zoom-on-focus in AI chat (and all inputs)

Browse source 
Focusing an input with font-size <16px makes mobile browsers auto-zoom
the viewport, which distorted the home "Ask AI" popup UI. Enforce a 16px
minimum on form controls for touch devices via globals.css; desktop and
pinch-zoom accessibility are untouched.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-29 23:25:51 +05:30
parent 45f9d6261b
commit e53c51f044
1 changed files with 13 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/app/globals.css
View file

@ -70,3 +70,16 @@ body {
color: var(--foreground); color: var(--foreground);
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
/* Prevent mobile auto-zoom on input focus.
iOS Safari (and other mobile browsers) zoom the viewport whenever a focused
input/select/textarea has a font-size below 16px — which is what made the
home "Ask AI" popup (and other text-sm inputs) jump and distort the UI.
Enforce a 16px minimum on touch devices only; desktop styling is unchanged. */
@media (pointer: coarse) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
font-size: 16px;
}
}