From 1d2875d5d876d6e58395aa73bf0229a621969e34 Mon Sep 17 00:00:00 2001 From: Cho Young-Hwi Date: Fri, 27 Mar 2026 21:35:59 +0000 Subject: [PATCH 1/2] [#305] Fix mobile input auto-zoom on iOS Safari Add maximumScale: 1 to viewport config to prevent iOS Safari from zooming in when focusing input/textarea elements. Co-Authored-By: Claude Opus 4.6 (1M context) --- src/app/layout.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 5860a8bf..20b7b4ec 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -32,6 +32,7 @@ const themeColor = "#E8DFD0"; export const viewport: Viewport = { width: "device-width", initialScale: 1, + maximumScale: 1, viewportFit: "cover", }; From fded4bc7bde60d09801b2ec8c7e2ab32c31b1603 Mon Sep 17 00:00:00 2001 From: Cho Young-Hwi Date: Fri, 27 Mar 2026 21:38:44 +0000 Subject: [PATCH 2/2] [#305] Use targeted CSS fix instead of maximumScale viewport cap Revert maximumScale: 1 which disabled pinch-to-zoom globally. Instead, use @supports (-webkit-touch-callout: none) to target iOS Safari and set font-size: max(16px, 1em) on input/textarea/select elements. iOS only auto-zooms on inputs with font-size < 16px. Pinch-to-zoom remains fully functional. Co-Authored-By: Claude Opus 4.6 (1M context) --- src/app/globals.css | 7 +++++++ src/app/layout.tsx | 1 - 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/globals.css b/src/app/globals.css index 92ed3567..d9077b8d 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -203,6 +203,13 @@ code, pre, .font-mono { } } +/* Prevent iOS Safari auto-zoom on input focus (triggers at font-size < 16px) */ +@supports (-webkit-touch-callout: none) { + input, textarea, select { + font-size: max(16px, 1em); + } +} + /* Custom select dropdown styling */ select { appearance: none; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 20b7b4ec..5860a8bf 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -32,7 +32,6 @@ const themeColor = "#E8DFD0"; export const viewport: Viewport = { width: "device-width", initialScale: 1, - maximumScale: 1, viewportFit: "cover", };