ui(player): widen spectrum to fill column; swap volume control to left of VU cluster

- Spectrum: switch from flex to grid auto-flow so each bar gets an
  equal-width column slot regardless of bar count. Fewer (40) but
  fatter bars now genuinely span the full grid column.
- Spectrum height bumped to 70px, gap 4px.
- VU cluster: flex-direction: row-reverse so volume controls sit on
  the LEFT, readout in the middle, VU meter on the RIGHT.
- Volume hairline divider switched from border-left to border-right
  so it stays between the volume controls and the readout.
This commit is contained in:
2026-04-25 02:13:22 +03:00
parent 336d596b66
commit 153424eff8
2 changed files with 21 additions and 15 deletions
+3 -2
View File
@@ -166,11 +166,12 @@ window.addEventListener('DOMContentLoaded', async () => {
// Vinyl is now structural / always-on via CSS — no init call needed.
// applyVinylMode();
// Build the editorial spectrum bars (60 spans). JS-managed so we can
// Build the editorial spectrum bars. Fewer, fatter bars read better
// than many thin ones at this column width. JS-managed so we can
// drive heights from real audio data when available.
const spectrumRoot = document.getElementById('player-spectrum');
if (spectrumRoot && !spectrumRoot.children.length) {
const SPECTRUM_BARS = 60;
const SPECTRUM_BARS = 40;
const frag = document.createDocumentFragment();
for (let i = 0; i < SPECTRUM_BARS; i++) {
const s = document.createElement('span');