danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix dashboard header layout — center worker orbs, reposition quick-nav

Browse source 
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.
This commit is contained in:
Broque Thomas 2026-04-16 12:36:12 -07:00
parent 61c7848121
commit 4c9bab356d
2 changed files with 65 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
webui/index.html
View file

@ -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>

73
webui/static/style.css
View file

@ -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-button {
.header-quick-nav {
position: static;
width: 100%;
display: flex;
gap: 8px;
}
.header-quick-nav .header-button {
flex: 1;
min-width: 100%;
justify-content: center;
}
.service-status-grid,