From 2f2cc309a3f7cd095a62008aab82a85d67145956 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Wed, 3 Dec 2025 21:01:17 +0000
Subject: [PATCH] Fix iOS Safari auto-zoom on input fields

- Changed all input/textarea/select font-size from text-sm to text-base (16px minimum)
- Added blur handler to reset viewport zoom on InlineItemCreate
- Prevents iOS Safari from auto-zooming when focusing on form fields
- Ensures zoom resets properly when closing forms
---
 components/InlineItemCreate.tsx | 12 +++++++++++-
 components/ItemForm.tsx         | 12 ++++++------
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/components/InlineItemCreate.tsx b/components/InlineItemCreate.tsx
index 74aca76..8cc4221 100644
--- a/components/InlineItemCreate.tsx
+++ b/components/InlineItemCreate.tsx
@@ -63,6 +63,10 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
   const handleCancel = () => {
     setTitle('')
     setIsCreating(false)
+    // Reset zoom on iOS Safari
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur()
+    }
   }
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -71,6 +75,11 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
     }
   }
 
+  const handleBlur = () => {
+    // Force viewport reset on iOS Safari
+    window.scrollTo(0, 0)
+  }
+
   if (!isCreating) {
     return (
       <button
@@ -94,10 +103,11 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
             setError('')
           }}
           onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
           placeholder="Enter task title..."
           autoFocus
           maxLength={200}
-          className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base ${
+          className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-base ${
             error ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500'
           }`}
           aria-invalid={error ? 'true' : 'false'}
diff --git a/components/ItemForm.tsx b/components/ItemForm.tsx
index 2a58988..c2ebb80 100644
--- a/components/ItemForm.tsx
+++ b/components/ItemForm.tsx
@@ -264,7 +264,7 @@ export default function ItemForm({ listId, item, mode = 'edit', canEdit = true }
           onChange={(e) => setTitle(e.target.value)}
           onBlur={() => handleBlur('title')}
           disabled={!canEdit}
-          className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base ${
+          className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-base ${
             errors.title && touched.title
               ? 'border-red-500 focus:ring-red-500'
               : 'border-gray-300 focus:ring-blue-500'
@@ -293,7 +293,7 @@ export default function ItemForm({ listId, item, mode = 'edit', canEdit = true }
           onBlur={() => handleBlur('description')}
           disabled={!canEdit}
           rows={3}
-          className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base resize-y ${
+          className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-base resize-y ${
             errors.description && touched.description
               ? 'border-red-500 focus:ring-red-500'
               : 'border-gray-300 focus:ring-blue-500'
@@ -320,7 +320,7 @@ export default function ItemForm({ listId, item, mode = 'edit', canEdit = true }
           value={priority}
           onChange={(e) => setPriority(e.target.value as 'low' | 'medium' | 'high')}
           disabled={!canEdit}
-          className={`w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base tap-target ${!canEdit ? 'bg-gray-100 cursor-not-allowed' : ''}`}
+          className={`w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-base tap-target ${!canEdit ? 'bg-gray-100 cursor-not-allowed' : ''}`}
         >
           <option value="low">Low</option>
           <option value="medium">Medium</option>
@@ -340,7 +340,7 @@ export default function ItemForm({ listId, item, mode = 'edit', canEdit = true }
           onChange={(e) => setDueDate(e.target.value)}
           onBlur={() => handleBlur('dueDate')}
           disabled={!canEdit}
-          className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base tap-target ${
+          className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-base tap-target ${
             errors.dueDate && touched.dueDate
               ? 'border-red-500 focus:ring-red-500'
               : 'border-gray-300 focus:ring-blue-500'
@@ -370,7 +370,7 @@ export default function ItemForm({ listId, item, mode = 'edit', canEdit = true }
             onChange={(e) => setTagInput(e.target.value)}
             onKeyDown={handleKeyDown}
             disabled={!canEdit}
-            className={`flex-1 px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base ${
+            className={`flex-1 px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-base ${
               errors.tagInput
                 ? 'border-red-500 focus:ring-red-500'
                 : 'border-gray-300 focus:ring-blue-500'
@@ -432,7 +432,7 @@ export default function ItemForm({ listId, item, mode = 'edit', canEdit = true }
           onBlur={() => handleBlur('notes')}
           disabled={!canEdit}
           rows={5}
-          className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base resize-y ${
+          className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-base resize-y ${
             errors.notes && touched.notes
               ? 'border-red-500 focus:ring-red-500'
               : 'border-gray-300 focus:ring-blue-500'