From 82c606569a415580071c00f6e048c8a9c318f56d Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Thu, 1 Jan 2026 19:17:28 +0100
Subject: [PATCH] fix: Replace sticky bar with proper FAB buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previous sticky bar implementation took up vertical space in layout,
making viewport issues worse. Replaced with proper floating action
buttons that don't affect layout.

Changes:
- Remove sticky bar from index.html
- Add FAB container with fixed position (no layout impact)
- Two circular buttons: DM (green) and Contacts (blue)
- position: fixed, right: 16px, top: 80px
- z-index: 900 (lower than offcanvas menu 1045)
- Beautiful gradients and shadows
- Hover/active animations (scale transform)
- Mobile responsive (smaller on <768px)

Features:
- No vertical space taken (fixed position)
- Covered by offcanvas when menu opens (z-index hierarchy)
- Always visible in corner
- Uses navigateTo() for clean navigation

Test scenario:
1. Click FAB buttons (bypass offcanvas menu completely)
2. Navigate to DM / Contact Management
3. Return to main page
4. Check if status bar corruption still occurs

If FABs work: problem is in offcanvas cleanup
If FABs fail: problem is deeper in viewport/layout

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 app/static/css/style.css | 69 +++++++++++++++++++++++++++++++---------
 app/templates/index.html | 20 ++++++------
 2 files changed, 64 insertions(+), 25 deletions(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index 9091009..3ffe7ac 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -581,26 +581,65 @@ main {
 }
 
 /* =============================================================================
-   TEST: Floating Navigation Buttons
+   TEST: Floating Action Buttons (FAB)
    ============================================================================= */
 
-.floating-test-buttons {
-    position: sticky;
-    top: 0;
-    z-index: 999;
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(10px);
-    padding: 0.5rem;
+.fab-container {
+    position: fixed;
+    right: 16px;
+    top: 80px;
+    z-index: 900; /* Lower than offcanvas (1045) but higher than content */
     display: flex;
-    gap: 0.5rem;
-    justify-content: center;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    flex-direction: column;
+    gap: 12px;
 }
 
-.floating-test-buttons .btn {
-    min-width: 100px;
-    font-weight: 500;
+.fab {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    cursor: pointer;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.fab:hover {
+    transform: scale(1.1);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
+}
+
+.fab:active {
+    transform: scale(0.95);
+}
+
+.fab-dm {
+    background: linear-gradient(135deg, #198754 0%, #157347 100%);
+    color: white;
+}
+
+.fab-contacts {
+    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
+    color: white;
+}
+
+/* Mobile optimization */
+@media (max-width: 768px) {
+    .fab-container {
+        right: 12px;
+        top: 70px;
+        gap: 10px;
+    }
+
+    .fab {
+        width: 48px;
+        height: 48px;
+        font-size: 1.25rem;
+    }
 }
 
 /* =============================================================================
diff --git a/app/templates/index.html b/app/templates/index.html
index 44d35d0..ec8fce8 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -44,16 +44,6 @@
 {% endblock %}
 
 {% block content %}
-<!-- TEST: Floating navigation buttons (bypass offcanvas menu) -->
-<div class="floating-test-buttons">
-    <button class="btn btn-sm btn-success" onclick="navigateTo('/dm');" title="Test: Direct Messages">
-        <i class="bi bi-envelope"></i> DM
-    </button>
-    <button class="btn btn-sm btn-primary" onclick="navigateTo('/contacts/manage');" title="Test: Contact Management">
-        <i class="bi bi-person-check"></i> Contacts
-    </button>
-</div>
-
 <div class="container-fluid d-flex flex-column" style="height: 100%;">
     <!-- Messages Container -->
     <div class="row flex-grow-1 overflow-hidden" style="min-height: 0;">
@@ -115,6 +105,16 @@
         </div>
     </div>
 </div>
+
+<!-- TEST: Floating Action Buttons (fixed position, no layout impact) -->
+<div class="fab-container">
+    <button class="fab fab-dm" onclick="navigateTo('/dm');" title="Test: Direct Messages">
+        <i class="bi bi-envelope-fill"></i>
+    </button>
+    <button class="fab fab-contacts" onclick="navigateTo('/contacts/manage');" title="Test: Contact Management">
+        <i class="bi bi-person-fill"></i>
+    </button>
+</div>
 {% endblock %}
 
 {% block extra_scripts %}