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/templates/base.html

@@ -41,7 +41,7 @@
                     <!-- Channels loaded dynamically via JavaScript -->
                 </select>
                 <button class="btn btn-outline-light btn-sm" data-bs-toggle="offcanvas" data-bs-target="#mainMenu" title="Menu">
-                    <i class="bi bi-list" style="font-size: 1.25rem;"></i>
+                    <i class="bi bi-list"></i>
                 </button>
             </div>
         </div>
@@ -63,14 +63,14 @@
                     <i class="bi bi-broadcast-pin" style="font-size: 1.5rem;"></i>
                     <span>Manage Channels</span>
                 </button>
-                <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" onclick="window.location.href='/dm';">
+                <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" onclick="navigateTo('/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>
                 </button>
-                <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" onclick="window.location.href='/contacts/manage';">
+                <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" onclick="navigateTo('/contacts/manage');">
                     <i class="bi bi-person-check" style="font-size: 1.5rem;"></i>
                     <span>Contact Management</span>
                 </button>