riyadhafraa
f108b59c74
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