fix: Resolve PWA viewport corruption on page navigation

Root cause: Bootstrap offcanvas leaves backdrop/body classes in DOM
when navigating via window.location.href, causing viewport issues.

Changes:
- Remove hamburger menu button from DM navbar (caused overflow)
- Reduce menu button icon size on channels (remove font-size override)
- Add global navigateTo() function in app.js and contacts.js
- Function closes offcanvas, removes backdrops, clears body classes
- Replace all window.location.href calls with navigateTo()
- Updated navigation in: base.html, contacts*.html templates
- Add 100ms delay before navigation to ensure cleanup completes

This fixes the issue where:
1. Opening offcanvas menu on main page
2. Navigating to DM or Contact Management
3. Returning to main page
Results in corrupted viewport with hidden status bar

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/static/js/app.js

@@ -16,6 +16,35 @@ let unreadCounts = {};  // Track unread message counts per channel
 let dmLastSeenTimestamps = {};  // Track last seen DM timestamp per conversation
 let dmUnreadCounts = {};  // Track unread DM counts per conversation
 
+/**
+ * Global navigation function - closes offcanvas and cleans up before navigation
+ * This prevents Bootstrap backdrop/body classes from persisting after page change
+ */
+window.navigateTo = function(url) {
+    // Close offcanvas if open
+    const offcanvasEl = document.getElementById('mainMenu');
+    if (offcanvasEl) {
+        const offcanvas = bootstrap.Offcanvas.getInstance(offcanvasEl);
+        if (offcanvas) {
+            offcanvas.hide();
+        }
+    }
+
+    // Remove any lingering Bootstrap classes/backdrops
+    document.body.classList.remove('modal-open', 'offcanvas-open');
+    document.body.style.overflow = '';
+    document.body.style.paddingRight = '';
+
+    // Remove any backdrops
+    const backdrops = document.querySelectorAll('.offcanvas-backdrop, .modal-backdrop');
+    backdrops.forEach(backdrop => backdrop.remove());
+
+    // Navigate after cleanup
+    setTimeout(() => {
+        window.location.href = url;
+    }, 100);
+};
+
 // Initialize on page load
 document.addEventListener('DOMContentLoaded', async function() {
     console.log('mc-webui initialized');

app/static/js/contacts.js

@@ -10,6 +10,30 @@
  * - Mobile-first design
  */
 
+// =============================================================================
+// Global Navigation Helper
+// =============================================================================
+
+/**
+ * Global navigation function - cleans up DOM before navigation
+ * This prevents viewport issues when navigating between pages
+ */
+window.navigateTo = function(url) {
+    // Remove any lingering Bootstrap classes/backdrops
+    document.body.classList.remove('modal-open', 'offcanvas-open');
+    document.body.style.overflow = '';
+    document.body.style.paddingRight = '';
+
+    // Remove any backdrops
+    const backdrops = document.querySelectorAll('.offcanvas-backdrop, .modal-backdrop');
+    backdrops.forEach(backdrop => backdrop.remove());
+
+    // Navigate after cleanup
+    setTimeout(() => {
+        window.location.href = url;
+    }, 100);
+};
+
 // =============================================================================
 // State Management
 // =============================================================================