From 77abbac905c6100cb1c445c8eefa166e1cdbc199 Mon Sep 17 00:00:00 2001
From: n30nex <blushellneon@outlook.com>
Date: Sat, 12 Sep 2026 16:59:04 -0400
Subject: [PATCH] fix(region): avoid focus zoom on small filter text

---
 src/components/AppShell.tsx        |  3 ++-
 tests/browser/region-input-zoom.js | 13 +++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 tests/browser/region-input-zoom.js

diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index bd70ba5..0d824d0 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -199,6 +199,7 @@ function RegionSelectorPanel() {
   return (
     <>
       <div className="sticky -top-1 z-10 -mt-1 bg-bg-raised px-2 pt-1 pb-1.5">
+        {/* Keep focused text at 16px so iOS Safari does not zoom the page. */}
         <input
           ref={inputRef}
           type="text"
@@ -212,7 +213,7 @@ function RegionSelectorPanel() {
             }
           }}
           placeholder="Filter IATA or name…"
-          className="w-full text-[11px] font-mono bg-bg-surface border border-border rounded px-2 py-1 text-text-bright placeholder:text-text-dim"
+          className="w-full text-[16px] font-mono bg-bg-surface border border-border rounded px-2 py-1 text-text-bright placeholder:text-text-dim"
         />
       </div>
 
diff --git a/tests/browser/region-input-zoom.js b/tests/browser/region-input-zoom.js
new file mode 100644
index 0000000..f7dce0d
--- /dev/null
+++ b/tests/browser/region-input-zoom.js
@@ -0,0 +1,13 @@
+// Open REGION, then run in a real browser at phone, tablet and desktop widths.
+// jsdom does not load Tailwind's generated CSS; inspect the rendered input instead.
+// Also check on iOS Safari: opening, filtering and closing must leave zoom unchanged.
+(function checkRegionInputZoom() {
+  const input = document.querySelector('header input[placeholder="Filter IATA or name…"]');
+  if (!input) throw new Error("Open the region picker first");
+  const fontSize = Number.parseFloat(getComputedStyle(input).fontSize);
+  if (fontSize < 16 || !Number.isFinite(fontSize)) {
+    throw new Error(`Region filter is ${fontSize}px; small focused inputs can trigger Safari zoom`);
+  }
+  if (document.activeElement !== input) throw new Error("Region filter did not receive focus");
+  return { viewport: document.documentElement.clientWidth, fontSize, focused: true };
+})();