From e53c51f044129aaa5ad85039d27c78b0fdaf2b74 Mon Sep 17 00:00:00 2001 From: Mannu Date: Fri, 29 May 2026 23:25:51 +0530 Subject: [PATCH] Fix mobile zoom-on-focus in AI chat (and all inputs) 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 --- src/app/globals.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/app/globals.css b/src/app/globals.css index 11fff64..326a6aa 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -70,3 +70,16 @@ body { color: var(--foreground); 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; + } +}