From 55c9be761c2920e9d4d0f4a9bddd238c6f91dc09 Mon Sep 17 00:00:00 2001
From: zuevav <34027267+zuevav@users.noreply.github.com>
Date: Fri, 15 May 2026 00:02:58 +0300
Subject: [PATCH] Fix tiny price-input field and iOS zoom-on-focus on number
 inputs

input[type="number"] wasn't in the global input selector, so the price
field rendered with browser defaults: tiny font, no padding, and a
spinner that squeezed the hit area. On iOS this also caused a focus-
zoom because the rendered font size was below the 16px threshold
Safari uses to decide whether to zoom in.

Adds number/search/tel/url types to the styled input selector, bumps
the global font-size to a hard 16px (still 1rem in practice but
explicit prevents subsequent overrides), and hides the spinner via
webkit/moz appearance reset. Same treatment in the mobile @media
block. Result: price field looks identical to the nickname field and
the page no longer zooms when focusing it.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 css/style.css | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index 20f2fec..9398801 100644
--- a/css/style.css
+++ b/css/style.css
@@ -335,6 +335,10 @@ body {
 input[type="text"],
 input[type="password"],
 input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="tel"],
+input[type="url"],
 select,
 textarea {
     width: 100%;
@@ -342,7 +346,9 @@ textarea {
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
     border-radius: var(--radius-md);
-    font-size: 1rem;
+    /* 16px minimum prevents iOS Safari from zooming the page when an input
+       receives focus. */
+    font-size: 16px;
     font-family: inherit;
     color: var(--text-primary);
     transition: all var(--transition-fast);
@@ -362,6 +368,17 @@ textarea {
     font-family: 'SF Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
 }
 
+/* Hide the up/down spinner on number inputs so the field looks the same
+   as the text inputs (and the actual hit area isn't squeezed). */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
 select {
     cursor: pointer;
     appearance: none;
@@ -3589,6 +3606,11 @@ select {
 
     input[type="text"],
     input[type="password"],
+    input[type="email"],
+    input[type="number"],
+    input[type="search"],
+    input[type="tel"],
+    input[type="url"],
     textarea,
     select {
         font-size: 16px;