fix: prevent textarea auto-zoom on mobile

openspec/changes/fix-mobile-textarea-zoom/proposal.md

@@ -0,0 +1,16 @@
+# Change: Fix Mobile Textarea Zoom Issue
+
+## Why
+On mobile devices, tapping the textarea causes unwanted zoom because the font-size (14px) is below the 16px threshold that triggers automatic zoom on iOS Safari and other mobile browsers. This breaks the user experience and makes editing difficult.
+
+## What Changes
+- Increase textarea font-size to 16px on mobile devices
+- Add media query targeting mobile viewports to apply appropriate font-size
+- Maintain existing 14px font-size on desktop where zoom is not an issue
+
+## Impact
+- Affected specs: mobile-support
+- Affected code: src/styles.scss
+- Breaking changes: none (style-only improvement)
+
+.

openspec/changes/fix-mobile-textarea-zoom/specs/mobile-support/spec.md

@@ -0,0 +1,13 @@
+## MODIFIED Requirements
+### Requirement: Mobile Text Input Support
+The system SHALL provide a comfortable editing experience on mobile devices without unwanted zoom behavior.
+
+#### Scenario: Tap textarea on mobile device
+- **WHEN** user taps the textarea on a mobile device
+- **THEN** the textarea does not trigger automatic browser zoom
+- **AND** the font-size is at least 16px to prevent iOS Safari zoom behavior
+
+#### Scenario: Desktop editing experience unchanged
+- **WHEN** user edits on desktop viewport
+- **THEN** the textarea maintains the original 14px font-size
+- **AND** the editing experience remains consistent with previous behavior

openspec/changes/fix-mobile-textarea-zoom/tasks.md

@@ -0,0 +1,3 @@
+## 1. Implementation
+- [x] 1.1 Add 16px font-size for textarea on mobile viewports
+- [x] 1.2 Build and verify fix in output

src/styles.scss

@@ -1199,4 +1199,7 @@
         max-height: min(80vh, 720px);
         border-radius: 18px 18px 0 0;
       }
+      textarea{
+        font-size: 16px;
+      }
     }