From 32036b73126179c6403b657f0ba46f467f4c6bb8 Mon Sep 17 00:00:00 2001 From: Honey Date: Tue, 19 May 2026 20:59:56 +0200 Subject: [PATCH] fix: collapse status-badge row when inactive so player-info centers correctly MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit .player-status-row had min-height:16px + margin-top:3px = 19px of permanent invisible space, making player-info ~63px tall on desktop. Centered in 112px this pushed the title to ~25px from top instead of ~34px. Switched badges from opacity:0 (still in layout) to display:none, removed min-height — row collapses to 0 when no badge is active so player-info is only as tall as the visible title+album+artist rows (~44px), and align-items:center on player-track places them at the true bar midpoint. Co-Authored-By: Claude Sonnet 4.6 --- styles.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/styles.css b/styles.css index 425cf3c..bd02e67 100644 --- a/styles.css +++ b/styles.css @@ -714,9 +714,9 @@ button:focus{outline:none} /* ── ARTIST PAGE ── */ /* ── SHUFFLE/REPEAT STATUS BADGES ── */ -.player-status-row{display:flex;align-items:center;gap:6px;margin-top:3px;min-height:16px} -.status-badge{font-size:9px;font-weight:700;letter-spacing:.4px;padding:2px 6px;border-radius:10px;text-transform:uppercase;opacity:0;transition:opacity .2s,transform .2s;transform:scale(.8);pointer-events:none} -.status-badge.on{opacity:1;transform:scale(1)} +.player-status-row{display:flex;align-items:center;gap:6px;margin-top:3px} +.status-badge{display:none;font-size:9px;font-weight:700;letter-spacing:.4px;padding:2px 6px;border-radius:10px;text-transform:uppercase} +.status-badge.on{display:inline-flex} .badge-shuffle{background:var(--accent-dim);color:var(--accent)} .badge-repeat{background:var(--blue-dim);color:var(--blue)}