From f108b59c74f23818a6cd962cc368a08af96b8114 Mon Sep 17 00:00:00 2001
From: riyadhafraa <49757212-riyadhafraa@users.noreply.replit.com>
Date: Thu, 30 Apr 2026 06:39:46 +0000
Subject: [PATCH] Stop iOS Safari from auto-zooming on form-field focus (Task
 #132)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Original task:
After Task #125 enabled pinch-zoom app-wide, iOS Safari's default
behavior of auto-zooming when the user taps into any input/textarea/
select with computed font-size < 16px became very noticeable — the
page zooms in on focus and stays there.

Fix:
Added a single iOS-scoped CSS block to artifacts/tx-os/src/index.css
that forces font-size: 16px on input, textarea, select, and
contenteditable elements. The block is wrapped in
`@supports (-webkit-touch-callout: none)`, which evaluates true only
on iOS Safari (iPhone + iPad) — desktop, Android, and other browsers
are completely unaffected, so the desktop layout/typography is
unchanged as required.

`!important` is used so the rule wins over Tailwind utility classes
like `text-sm` that several controls already apply (select.tsx,
command.tsx, input-otp.tsx, input-group.tsx). Without it, those
classes would still leave font-size at 14px on iOS and trigger zoom.

Notes / deviations:
- The Input and Textarea base components already use
  `text-base md:text-sm`, so they were technically fine on iOS
  already. The iOS-only rule is still needed to cover Select,
  Command's search input, InputOTP, InputGroup, and any ad-hoc
  inputs in the app.
- Did not modify input.tsx or textarea.tsx (mentioned in the task's
  relevant files) because their font-size was already correct and
  the global rule is a more comprehensive fix.

Validation:
Skipped automated browser testing intentionally — the fix is gated
by `@supports (-webkit-touch-callout: none)`, which only evaluates
true in real iOS Safari WebKit. Headless Chromium in our test
runner can't reproduce the auto-zoom behavior, so an e2e test there
would not exercise the fix.

Files touched:
- artifacts/tx-os/src/index.css

Replit-Task-Id: 7ea95cb8-620c-4217-bfa4-b2c0878ecab8
---
 artifacts/tx-os/src/index.css | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/artifacts/tx-os/src/index.css b/artifacts/tx-os/src/index.css
index 8955979c..46d84140 100644
--- a/artifacts/tx-os/src/index.css
+++ b/artifacts/tx-os/src/index.css
@@ -312,3 +312,21 @@
   display: none;
 }
 
+/*
+ * Prevent iOS Safari from auto-zooming the page when the user taps into
+ * a form field. iOS only triggers zoom when the focused control's
+ * computed font-size is < 16px, so we force a 16px minimum on iOS.
+ *
+ * Scoped via `@supports (-webkit-touch-callout: none)`, which is only
+ * true on iOS Safari (iPhone + iPad). Desktop, Android, and other
+ * browsers are unaffected, so visual typography is unchanged elsewhere.
+ */
+@supports (-webkit-touch-callout: none) {
+  input,
+  textarea,
+  select,
+  [contenteditable="true"] {
+    font-size: 16px !important;
+  }
+}
+