From 509a66a609454558325f3213071667502ed875ef Mon Sep 17 00:00:00 2001
From: Oleksandr Kozachuk <201152+ok2@users.noreply.github.com>
Date: Mon, 8 Jun 2026 22:04:55 +0200
Subject: [PATCH] =?UTF-8?q?web:=20prevent=20iOS=20focus-zoom=20=E2=80=94?=
 =?UTF-8?q?=20inputs/textarea=20>=3D=2016px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

iOS Safari auto-zooms (and stays zoomed) when a focused input is under 16px.
Bumped the form inputs (15px) and modal textareas (13px) to 16px; the console
input inherits the base. No viewport user-scalable hack (keeps pinch-zoom).
---
 helwasm/style.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/helwasm/style.css b/helwasm/style.css
index 32aaa60..c10cb33 100644
--- a/helwasm/style.css
+++ b/helwasm/style.css
@@ -144,7 +144,9 @@ main { padding: clamp(20px, 3vw, 34px) 0 56px; display: grid; grid-template-colu
 .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
 .field label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
 input[type="text"], input[type="password"] {
-  font-family: var(--mono); font-size: 15px; color: var(--ink);
+  /* 16px min: iOS Safari auto-zooms (and stays zoomed) when a focused input is
+     under 16px. Keep all focusable fields >= 16px to stop that. */
+  font-family: var(--mono); font-size: 16px; color: var(--ink);
   background: #fff; border: 1px solid var(--line); border-radius: 10px;
   padding: 12px 14px; width: 100%; outline: none;
   transition: border-color .15s, box-shadow .15s;
@@ -236,7 +238,7 @@ input.mask { -webkit-text-security: disc; }
   width: 100%; max-width: 680px; padding: 24px; }
 .modal h3 { font-family: var(--disp); font-weight: 600; margin-bottom: 10px; }
 .modal textarea {
-  width: 100%; height: 260px; resize: vertical; font-family: var(--mono); font-size: 13px;
+  width: 100%; height: 260px; resize: vertical; font-family: var(--mono); font-size: 16px;
   border: 1px solid var(--line); border-radius: 10px; padding: 12px; outline: none; white-space: pre;
 }
 .modal textarea:focus { border-color: var(--ocean); }