From 75f6c5bf998db2d04e255effaad08b5219175668 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Sun, 25 May 2025 16:37:10 +0000
Subject: [PATCH] Fix mobile interface issues: prevent text zoom and improve
 reply layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add font-size: 16px to all input elements to prevent iOS Safari zoom on focus
- Improve mobile responsive layout for message input container
- Ensure reply preview doesn't push send button off screen on mobile

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: humanizersequel <humanizersequel@users.noreply.github.com>
---
 ui/src/App.css | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/ui/src/App.css b/ui/src/App.css
index b77bac5..459da1b 100644
--- a/ui/src/App.css
+++ b/ui/src/App.css
@@ -144,6 +144,12 @@
   height: 20px;
   max-height: 100px;
   overflow-y: auto;
+  font-size: 16px; /* Prevent zoom on iOS */
+}
+
+/* Prevent zoom on all input and textarea elements on mobile */
+input, textarea {
+  font-size: 16px;
 }
 
 .send-button {
@@ -236,4 +242,26 @@
   .message-item {
     max-width: 85%;
   }
+  
+  .message-input-container {
+    flex-direction: column;
+    padding: 8px;
+  }
+  
+  /* Ensure reply preview doesn't interfere with input controls */
+  .message-input-container > div:first-child {
+    margin-bottom: 8px;
+  }
+  
+  /* Input row should remain horizontal even on mobile */
+  .message-input-container > div:last-child {
+    display: flex;
+    gap: 5px;
+    width: 100%;
+  }
+  
+  .message-input {
+    font-size: 16px; /* Prevent zoom on iOS */
+    margin-right: 0;
+  }
 }