From 6f351f8bc15299b569223e00a1c8a97fe65dc817 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Fri, 26 Dec 2025 08:11:56 +0100
Subject: [PATCH] fix(dm): Fix mobile menu link and page height issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Change DM menu link from <a> to <button> with onclick for better
  mobile compatibility (fixes link not working on some devices)
- Add proper flexbox layout styles for DM page viewport height
- Use 100dvh (dynamic viewport height) for mobile browsers
- Add flex-shrink: 0 to form and status bar to prevent overflow
- Reduce padding in form and status bar for more compact mobile view

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/templates/base.html |  4 ++--
 app/templates/dm.html   | 38 ++++++++++++++++++++++++++++++++------
 2 files changed, 34 insertions(+), 8 deletions(-)
diff --git a/app/templates/base.html b/app/templates/base.html
index 846a397..b827d03 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -63,13 +63,13 @@
                     <i class="bi bi-broadcast-pin" style="font-size: 1.5rem;"></i>
                     <span>Manage Channels</span>
                 </button>
-                <a href="/dm" class="list-group-item list-group-item-action d-flex align-items-center gap-3" data-bs-dismiss="offcanvas">
+                <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" onclick="window.location.href='/dm';">
                     <i class="bi bi-envelope" style="font-size: 1.5rem;"></i>
                     <div class="d-flex flex-grow-1 justify-content-between align-items-center">
                         <span>Direct Messages</span>
                         <span id="dmMenuBadge" class="badge bg-success rounded-pill" style="display: none;">0</span>
                     </div>
-                </a>
+                </button>
                 <div class="list-group-item">
                     <div class="d-flex align-items-center gap-3 mb-2">
                         <i class="bi bi-calendar3" style="font-size: 1.5rem;"></i>
diff --git a/app/templates/dm.html b/app/templates/dm.html
index ff30090..8d77f7c 100644
--- a/app/templates/dm.html
+++ b/app/templates/dm.html
@@ -57,6 +57,32 @@
                 max-width: 100%;
             }
         }
+
+        /* DM page layout - ensure proper height on mobile */
+        html, body {
+            height: 100vh;
+            height: 100dvh; /* Dynamic viewport height for mobile */
+            margin: 0;
+            overflow: hidden;
+        }
+        body {
+            display: flex;
+            flex-direction: column;
+        }
+        main {
+            flex: 1;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            min-height: 0;
+        }
+        .dm-page-container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-height: 0;
+            overflow: hidden;
+        }
     </style>
 </head>
 <body>
@@ -82,9 +108,9 @@
 
     <!-- Main Content -->
     <main>
-        <div class="container-fluid d-flex flex-column" style="height: 100%;">
+        <div class="container-fluid dm-page-container">
             <!-- Messages Container -->
-            <div class="row flex-grow-1 overflow-hidden" style="min-height: 0;">
+            <div class="row flex-grow-1 overflow-hidden" style="min-height: 0; flex: 1;">
                 <div class="col-12" style="height: 100%;">
                     <div id="dmMessagesContainer" class="messages-container h-100 overflow-auto p-3">
                         <div id="dmMessagesList">
@@ -100,9 +126,9 @@
             </div>
 
             <!-- Send Message Form -->
-            <div class="row border-top bg-light">
+            <div class="row border-top bg-light" style="flex-shrink: 0;">
                 <div class="col-12">
-                    <form id="dmSendForm" class="p-3">
+                    <form id="dmSendForm" class="p-2">
                         <div class="emoji-picker-container">
                             <div class="input-group">
                                 <input type="text"
@@ -129,9 +155,9 @@
             </div>
 
             <!-- Status Bar -->
-            <div class="row border-top">
+            <div class="row border-top" style="flex-shrink: 0;">
                 <div class="col-12">
-                    <div class="p-2 small text-muted d-flex justify-content-between align-items-center">
+                    <div class="p-1 small text-muted d-flex justify-content-between align-items-center">
                         <span id="dmStatusText">
                             <i class="bi bi-circle-fill text-secondary"></i> Ready
                         </span>
