From b2234931833c78f70b774c3519876007731a37de Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Tue, 23 Dec 2025 07:05:01 +0100
Subject: [PATCH] feat: Add responsive design improvements for mobile devices
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improve UI layout on mobile devices (screens < 768px):

Navbar optimizations:
- Hide "Refresh" text on mobile, show only icon to save space
- Reduce gap between navbar elements (0.25rem instead of 0.5rem)
- Decrease min-width for channel/date selectors (80px vs 120px/150px)
- Smaller font-size (0.75rem) and padding for select elements
- Compact button sizes (0.25rem padding)

Modal optimizations:
- Reduce modal margins (0.5rem) for better mobile fit
- Smaller modal-body padding (0.75rem)
- Compact channel keys with smaller font (0.65rem) and word-break
- Reduce list-group-item padding (0.5rem)
- Stack "Add New" and "Join Existing" buttons vertically on very small screens (<400px)

Files changed:
- app/static/css/style.css: Added mobile-specific CSS rules in @media query
- app/templates/base.html: Wrapped "Refresh" text in <span class="btn-text">

Testing: Verified on mobile viewport (iPhone, Android simulators)

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

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

diff --git a/app/static/css/style.css b/app/static/css/style.css
index db5b849..33bd99d 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -175,6 +175,62 @@ main {
         padding: 0.3rem !important;
         font-size: 0.7rem;
     }
+
+    /* Navbar: Hide "Refresh" text on mobile, show only icon */
+    #refreshBtn .btn-text {
+        display: none;
+    }
+
+    /* Navbar: Reduce gap between elements */
+    .navbar .d-flex {
+        gap: 0.25rem !important;
+    }
+
+    /* Navbar: Smaller selectors on mobile */
+    #channelSelector,
+    #dateSelector {
+        min-width: 80px !important;
+        font-size: 0.75rem;
+        padding: 0.25rem 0.5rem;
+    }
+
+    /* Navbar: Smaller buttons */
+    .navbar .btn-sm {
+        padding: 0.25rem 0.4rem;
+        font-size: 0.875rem;
+    }
+
+    /* Modal: Better mobile layout */
+    .modal-dialog {
+        margin: 0.5rem;
+    }
+
+    .modal-body {
+        padding: 0.75rem;
+    }
+
+    /* Modal: Smaller channel keys on mobile */
+    .list-group-item small {
+        font-size: 0.65rem;
+        word-break: break-all;
+    }
+
+    /* Modal: Compact channel list */
+    .list-group-item {
+        padding: 0.5rem;
+    }
+
+    /* Modal: Stack buttons vertically on very small screens */
+    @media (max-width: 400px) {
+        .btn-group {
+            flex-direction: column;
+        }
+
+        .btn-group .btn {
+            border-radius: 0.375rem !important;
+            margin-bottom: 0.25rem;
+        }
+    }
 }
 
 /* Loading State */
diff --git a/app/templates/base.html b/app/templates/base.html
index 5db61bd..9ec9adf 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -34,7 +34,7 @@
             </span>
             <div class="d-flex align-items-center gap-2">
                 <button class="btn btn-outline-light btn-sm" id="refreshBtn" title="Refresh messages">
-                    <i class="bi bi-arrow-clockwise"></i> Refresh
+                    <i class="bi bi-arrow-clockwise"></i> <span class="btn-text">Refresh</span>
                 </button>
                 <select id="channelSelector" class="form-select form-select-sm" style="width: auto; min-width: 120px;" title="Select channel">
                     <option value="0">Public</option>