From 0f30480af462793e111c5bc86fac7cbf8de003d5 Mon Sep 17 00:00:00 2001
From: Simon <simon.huenecke@gmail.com>
Date: Sat, 5 Sep 2026 15:26:21 +0000
Subject: [PATCH] Stop the phone zooming in on focus and double-tap

iOS zooms the whole page when you focus a control whose text is under
16px -- and it ignores user-scalable=no, so the font size is the only
lever that actually stops it. The search field (and the settings inputs
and selects) were 14px. They now render at 16px on touch devices only;
the coarse-pointer padding already in that block keeps them the same
physical size, and mouse users keep the 14px look.

body also gets touch-action: manipulation, which drops double-tap-to-zoom
-- the app handles its own taps, and the player/feed set touch-action:
none for their gestures regardless -- plus text-size-adjust: 100% so
Safari stops inflating text on its own after a rotation. Deliberate
pinch-zoom still works; taking that away would hurt anyone who needs it.

Checked in headless Chrome with touch emulation: every input, textarea
and select reports >=16px on a phone, desktop still reports 14px, body
touch-action is manipulation, and the player keeps touch-action: none.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QBDkEXP4htyXTCZUwMLphd
---
 frontend/css/style.css | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/frontend/css/style.css b/frontend/css/style.css
index ff2cb5f..3d954d5 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -41,6 +41,13 @@ body {
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
+    /* No accidental zoom: `manipulation` drops double-tap-to-zoom (the app's own
+       taps are handled in JS anyway) while leaving panning and deliberate
+       pinch-zoom alone, and text-size-adjust stops Safari inflating text of its
+       own accord after a rotation. */
+    touch-action: manipulation;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
 }
 
 body.drawer-open {
@@ -932,6 +939,26 @@ body.theme-light .setting-item select option {
     .input-row input {
         padding: 10px 14px;
     }
+
+    /* iOS zooms the whole page when you focus a control whose text is under
+       16px, and it ignores user-scalable=no -- so the font size is the only
+       lever that actually stops it. Every text control gets 16px on touch
+       devices; the padding above keeps them looking the same size. */
+    .search-container input,
+    .input-row input,
+    .setting-item select,
+    .cmdk-input,
+    input[type="text"],
+    input[type="search"],
+    input[type="number"],
+    input[type="url"],
+    input[type="email"],
+    input[type="password"],
+    input:not([type]),
+    textarea,
+    select {
+        font-size: 16px;
+    }
 }
 
 @media (prefers-reduced-motion: reduce) {