Toolbar icons (off-centre inside hit box)
- Legacy .header-btn had padding: 4px 6px and inline-flex with no
justify-content. With box-sizing: content-box and width: 36px, the
asymmetric horizontal padding shifted icons to the upper-left of
the 36×36 hit box.
- Override now sets display: inline-flex; align-items: center;
justify-content: center; padding: 0; box-sizing: border-box and
forces SVG children to display: block 16x16 so icons sit dead-
centre.
Spectrum width — root cause finally found and removed
- An old override block (lines 4821–4878) was still in the file:
.spectrum { max-width: 360px } + .spectrum span { width: 3px;
flex: 0 0 3px } + 30 nth-child rules. They had equal/higher
specificity for some props than the .now-playing-scoped rules
and were declared first, so width was capping the row.
- Deleted that whole block. .now-playing .spectrum is now the
single source of truth. Combined with the explicit
grid-template-columns: repeat(40, minmax(0, 1fr)) (set both in
CSS literal and from JS via gridTemplateColumns), the row
reliably fills the column.
VU needle resting position
- CSS default rotation changed from -22deg (pointing upper-left)
to -45deg — the conventional VU meter rest at silence (-∞ dB).
Matches stopVuWobble() which also settles the needle there.
Dynamic background — removed
- .bg-shader-canvas hidden via display: none.
- Toggle button (#bgToggle) hidden so the toolbar is cleaner.
- Canvas + JS module stay in DOM so the existing JS doesn't crash.
alexei.dolgolyov
d7f488ac70