From f361ebee09c4f6e40e4f459d3d55ce3404cf4776 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Sun, 21 Dec 2025 16:59:37 +0100
Subject: [PATCH] Fix: Optimize UI for mobile devices
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improved mobile user experience:
- Shortened hint text: 'Shift+Enter: new line, Enter: send' (was 'Press Shift+Enter for new line, Enter to send')
- Reduced form padding on mobile (0.5rem instead of default)
- Made status bar more compact on mobile (smaller padding and font)
- Better vertical space utilization on small screens

This should make the status bar visible on mobile devices and improve overall usability on phones.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 app/static/css/style.css | 11 +++++++++++
 app/templates/index.html |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index bfa18ff..6b001ce 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -162,6 +162,17 @@ main {
     #messageInput {
         font-size: 0.9rem;
     }
+
+    /* Reduce padding on mobile to save vertical space */
+    #sendMessageForm {
+        padding: 0.5rem !important;
+    }
+
+    /* Make status bar more compact */
+    .row.border-top .p-2 {
+        padding: 0.3rem !important;
+        font-size: 0.7rem;
+    }
 }
 
 /* Loading State */
diff --git a/app/templates/index.html b/app/templates/index.html
index c8a53bf..5ad9fa6 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -39,7 +39,7 @@
                     </button>
                 </div>
                 <div class="d-flex justify-content-between">
-                    <small class="text-muted">Press Shift+Enter for new line, Enter to send</small>
+                    <small class="text-muted">Shift+Enter: new line, Enter: send</small>
                     <small id="charCounter" class="text-muted">0 / 200</small>
                 </div>
             </form>