From 4c9bab356db2cefbbdb5786d7f19d0cf4f607cb2 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Thu, 16 Apr 2026 12:36:12 -0700
Subject: [PATCH] =?UTF-8?q?Fix=20dashboard=20header=20layout=20=E2=80=94?=
 =?UTF-8?q?=20center=20worker=20orbs,=20reposition=20quick-nav?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Worker orbs now centered across the full header width instead of
right-aligned. Watchlist/Wishlist buttons moved to absolute top-right
corner in their own container, preventing tooltip overflow from pushing
them to a second line. Import button removed from header (accessible
via sidebar).

Responsive: at 900px quick-nav drops to static full-width row, worker
orb tooltips hidden on mobile (status visible via orb color/spinner,
details on Tools page). At 768px everything stacks vertically.
---
 webui/index.html       |  9 ++----
 webui/static/style.css | 73 +++++++++++++++++++++++++++++++++++-------
 2 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index cfacb79d..cf246e44 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -313,7 +313,6 @@
                             <h2 class="header-title"><img src="/static/dashboard.png" class="page-header-icon" alt=""><span>System Dashboard</span></h2>
                             <p class="header-subtitle">Monitor your music system health and manage operations</p>
                         </div>
-                        <div class="header-spacer"></div>
                         <div class="header-actions">
                             <!-- MusicBrainz Enrichment Status Icon -->
                             <div class="mb-button-container">
@@ -599,11 +598,9 @@
                                     </div>
                                 </div>
                             </div>
-                            <button class="import-button" id="import-button" onclick="navigateToPage('import')"
-                                title="Import Music from Staging">
-                                <img src="https://cdn-icons-png.flaticon.com/512/8765/8765164.png" alt="Import"
-                                    class="import-logo">
-                            </button>
+                        </div>
+                        <!-- Watchlist / Wishlist quick-nav (top-right corner) -->
+                        <div class="header-quick-nav">
                             <button class="header-button watchlist-button" id="watchlist-button">
                                 <span class="hero-btn-icon">👁️</span>
                                 <span class="hero-btn-label">Watchlist</span>
diff --git a/webui/static/style.css b/webui/static/style.css
index 39ae1b17..62b36a22 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -7467,8 +7467,8 @@ body.helper-mode-active #dashboard-activity-feed:hover {
 /* Header Styling */
 .dashboard-header {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    flex-direction: column;
+    align-items: flex-start;
     padding: 20px 24px;
     margin: -28px -24px 20px -24px;
     position: relative;
@@ -7582,15 +7582,25 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     line-height: 1.5;
 }
 
-.header-spacer {
-    flex-grow: 1;
-    /* Pushes buttons to the right */
-}
-
 .header-actions {
     display: flex;
     gap: 10px;
+    align-items: center;
+    justify-content: center;
     flex-wrap: wrap;
+    margin-top: 12px;
+    width: 100%;
+}
+
+/* Watchlist / Wishlist quick-nav — top-right of header */
+.header-quick-nav {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    position: absolute;
+    top: 14px;
+    right: 24px;
+    z-index: 2;
 }
 
 /* ── Worker Orbs ── */
@@ -9152,6 +9162,38 @@ body.helper-mode-active #dashboard-activity-feed:hover {
 }
 
 /* Responsive Design Enhancements */
+@media (max-width: 900px) {
+    .header-quick-nav {
+        position: static;
+        width: 100%;
+        display: flex;
+        gap: 8px;
+        margin-top: 8px;
+    }
+
+    .header-quick-nav .header-button {
+        flex: 1;
+        justify-content: center;
+    }
+
+    /* Hide worker orb hover tooltips on mobile — status info available on Tools page */
+    .musicbrainz-tooltip,
+    .spotify-enrich-tooltip,
+    .audiodb-tooltip,
+    .deezer-tooltip,
+    .itunes-enrich-tooltip,
+    .lastfm-enrich-tooltip,
+    .genius-enrich-tooltip,
+    .tidal-enrich-tooltip,
+    .qobuz-enrich-tooltip,
+    .discogs-tooltip,
+    .hydrabase-tooltip,
+    .repair-tooltip,
+    .soulid-tooltip {
+        display: none !important;
+    }
+}
+
 @media (max-width: 1200px) {
     .tools-grid {
         grid-template-columns: 1fr;
@@ -9170,17 +9212,26 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     .dashboard-header {
         flex-direction: column;
         align-items: flex-start;
-        gap: 15px;
+        gap: 12px;
+        padding: 16px;
     }
 
     .header-actions {
         width: 100%;
-        justify-content: flex-start;
+        justify-content: center;
+        gap: 6px;
+    }
+
+    .header-quick-nav {
+        position: static;
+        width: 100%;
+        display: flex;
+        gap: 8px;
     }
 
-    .header-button {
+    .header-quick-nav .header-button {
         flex: 1;
-        min-width: 100%;
+        justify-content: center;
     }
 
     .service-status-grid,