From 00e512104c0edec4d8120fa36479b22f1af8b7ec Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Thu, 1 Jan 2026 17:11:02 +0100
Subject: [PATCH] refactor: Completely unify channel and DM interface styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Unify navbar:
- Add menu button to DM navbar (same icon as channels) for consistent height
- Both navbars now have 3 elements: back/brand, dropdown, menu button

Unify message input area:
- Disable textarea resize on both pages (resize: none)
- Unify input font-size on mobile (0.9rem)
- Unify form padding on mobile (0.5rem)
- Unify border-radius for send buttons

Unify message bubbles:
- Set DM message max-width to 70% (same as channels)
- Unify padding: 0.75rem 1rem (same as channels)
- Unify max-width on mobile: 85% for both
- Remove explicit font-size from DM bubbles (inherit default)
- Unify animation duration: 0.3s

Unify selectors:
- Apply same mobile styles to both #channelSelector and #dmConversationSelector

PWA fixes:
- Move safe-area handling from inline styles to main CSS
- Apply safe-area-inset-bottom globally for both pages
- Remove duplicate inline styles from dm.html

This should fix the Android PWA viewport issue where the bottom bar
gets hidden under system navigation after navigating to DM page.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 app/static/css/style.css | 36 ++++++++++++++++++++++++++----------
 app/templates/dm.html    | 10 +++-------
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index ac028b6..e87f4b2 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -111,12 +111,14 @@ main {
 }
 
 /* Send Form */
-#messageInput {
+#messageInput,
+#dmMessageInput {
     resize: none;
     border-radius: 0.5rem 0 0 0.5rem;
 }
 
-#sendBtn {
+#sendBtn,
+#dmSendBtn {
     border-radius: 0 0.5rem 0.5rem 0;
 }
 
@@ -188,7 +190,8 @@ main {
 
 /* Responsive Design */
 @media (max-width: 768px) {
-    .message {
+    .message,
+    .dm-message {
         max-width: 85%;
     }
 
@@ -196,12 +199,14 @@ main {
         font-size: 0.8rem;
     }
 
-    #messageInput {
+    #messageInput,
+    #dmMessageInput {
         font-size: 0.9rem;
     }
 
     /* Reduce padding on mobile to save vertical space */
-    #sendMessageForm {
+    #sendMessageForm,
+    #dmSendForm {
         padding: 0.5rem !important;
     }
 
@@ -217,7 +222,8 @@ main {
     }
 
     /* Navbar: Channel selector on mobile */
-    #channelSelector {
+    #channelSelector,
+    #dmConversationSelector {
         min-width: 100px !important;
         font-size: 0.9rem;
     }
@@ -377,12 +383,11 @@ main {
 
 /* DM Message Bubbles */
 .dm-message {
-    max-width: 80%;
-    padding: 0.5rem 0.75rem;
+    max-width: 70%;
+    padding: 0.75rem 1rem;
     border-radius: 1rem;
-    font-size: 0.9rem;
     word-wrap: break-word;
-    animation: fadeIn 0.2s ease-in;
+    animation: fadeIn 0.3s ease-in;
 }
 
 .dm-message.own {
@@ -574,3 +579,14 @@ main {
     border-radius: 0.5rem;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
 }
+
+/* =============================================================================
+   PWA Safe Area Handling
+   ============================================================================= */
+
+/* Ensure bottom UI is visible above system bars on mobile devices */
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+    body {
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+}
diff --git a/app/templates/dm.html b/app/templates/dm.html
index fee0afe..253fdca 100644
--- a/app/templates/dm.html
+++ b/app/templates/dm.html
@@ -57,13 +57,6 @@
                 max-width: 100%;
             }
         }
-
-        /* PWA safe area handling - ensure bottom UI is visible above system bars */
-        @supports (padding-bottom: env(safe-area-inset-bottom)) {
-            body {
-                padding-bottom: env(safe-area-inset-bottom);
-            }
-        }
     </style>
 </head>
 <body>
@@ -83,6 +76,9 @@
                     <option value="">Select chat...</option>
                     <!-- Conversations loaded dynamically via JavaScript -->
                 </select>
+                <button class="btn btn-outline-light btn-sm" onclick="window.location.href='/';" title="Back to Main Menu">
+                    <i class="bi bi-list" style="font-size: 1.25rem;"></i>
+                </button>
             </div>
         </div>
     </nav>