From 820a18648a5a7e33a6e1c81869f5cb21263e1d29 Mon Sep 17 00:00:00 2001 From: Byron Gamatos Date: Mon, 22 Jun 2026 14:04:06 +0200 Subject: [PATCH] fix(player): stop song name/timer overlapping the section map bar (#567) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The section_map plugin injects #section-map as #player's first child — a ~20px bar pinned to top:0 (z-index:5). #player-hud is also top:0/absolute but at z-index:10 with only py-3 (12px) top padding, so its song name (top-left) and timer (top-right) paint on top of that bar. Push the HUD's content below the bar when it is present. The general- sibling combinator only matches when #section-map precedes #player-hud — exactly how the plugin inserts it — so the bar-less layout is untouched. ID-on-ID specificity overrides Tailwind's .py-3 top padding. Co-authored-by: Claude Opus 4.8 (1M context) --- static/style.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/static/style.css b/static/style.css index c6827b3..f595d70 100644 --- a/static/style.css +++ b/static/style.css @@ -25,6 +25,17 @@ html { scroll-behavior: smooth; } } #highway { flex: 1; width: 100%; min-height: 0; } +/* The section_map plugin injects #section-map as #player's first child, a + ~20px bar pinned to top:0. #player-hud is also top:0/absolute but at a + higher z-index, so its song name (top-left) and timer (top-right) would + paint on top of that bar. When the bar is present, push the HUD's content + below it, preserving the HUD's original py-3 (0.75rem) inset *under* the + bar (bar height + py-3). The general-sibling combinator only matches when + #section-map precedes #player-hud — which is exactly how the plugin inserts + it (#highway sits between them) — so the bar-less layout is untouched. + ID-on-ID specificity overrides Tailwind's .py-3 top padding. */ +#section-map ~ #player-hud { padding-top: calc(20px + 0.75rem); } + /* Player controls need their own stacking context so visualization plugins that paint absolutely-positioned overlays (e.g. the bundled 3D Highway's WebGL wrap at z-index:2, or any community viz plugin)