From 17551f813b70f14a3e5f1a98305f4ea778dcf80e Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Wed, 11 Mar 2026 22:26:42 -0400
Subject: [PATCH] Fix https://github.com/donetick/frontend/issues/72 Add styles
 to prevent iOS Safari auto-zoom on input focus in index.css and
 RichTextEditor.css

---
 src/index.css                           | 9 +++++++++
 src/views/components/RichTextEditor.css | 7 +++++++
 2 files changed, 16 insertions(+)

diff --git a/src/index.css b/src/index.css
index 466e1e8..f2fa607 100644
--- a/src/index.css
+++ b/src/index.css
@@ -32,6 +32,15 @@ html {
 
 
 
+/* Prevent iOS Safari from auto-zooming on input focus (triggered when font-size < 16px) */
+@supports (-webkit-touch-callout: none) {
+  input,
+  textarea,
+  select {
+    font-size: max(16px, 1em);
+  }
+}
+
 /* Ensure smooth transitions for dynamic content */
 * {
   box-sizing: border-box;
diff --git a/src/views/components/RichTextEditor.css b/src/views/components/RichTextEditor.css
index 5c5cf95..20147ea 100644
--- a/src/views/components/RichTextEditor.css
+++ b/src/views/components/RichTextEditor.css
@@ -167,6 +167,13 @@
   line-height: 1.5;
 }
 
+/* Prevent iOS Safari from auto-zooming on focus (triggered when font-size < 16px) */
+@supports (-webkit-touch-callout: none) {
+  .quill-root .ql-editor {
+    font-size: 16px;
+  }
+}
+
 /* Custom focus styles */
 .quill-root:focus-within .ql-toolbar.ql-snow {
   border-color: var(--joy-palette-primary-outlinedBorder, #1976d2);