Summary
In the bar's round play button (.wb-play), the play triangle sits slightly left of the circle's center. The standalone waveform-player library handles this with an explicit optical correction — .waveform-icon-play svg { margin-left: 1px; } — but waveform-bar has no equivalent: there is no .wb-icon-play rule in its CSS at all, so the icon is centered purely by flexbox.
The triangle glyph (M8 5v14l11-7z, 24×24 viewBox) has its geometric/area center at x ≈ 11.67 vs. 12, i.e. ~0.33/24 ≈ 1.4% left of center. Without a nudge this is visible against the filled accent circle.
Reproduction
- Create a page with a WaveformBar (default
showQueue: false is fine).
- Play any track and look at the filled round play button in the bar.
- The triangle appears shifted slightly to the left of the circle's center.
Expected: the triangle centered the same way as in waveform-player (which adds margin-left: 1px on the play icon), so both components look consistent.
Actual: the triangle is centered by flexbox only and reads as off-center left.
Suggested fix
Add the same optical nudge used by waveform-player:
.wb-bar .wb-icon-play svg { margin-left: 1px; }
(or replicate .waveform-icon-play svg { margin-left: 1px } from the player's CSS).
Environment
- waveform-bar 1.11.0
- Firefox 139 / Chromium, light & dark themes
Summary
In the bar's round play button (
.wb-play), the play triangle sits slightly left of the circle's center. The standalonewaveform-playerlibrary handles this with an explicit optical correction —.waveform-icon-play svg { margin-left: 1px; }— butwaveform-barhas no equivalent: there is no.wb-icon-playrule in its CSS at all, so the icon is centered purely by flexbox.The triangle glyph (
M8 5v14l11-7z, 24×24 viewBox) has its geometric/area center at x ≈ 11.67 vs. 12, i.e. ~0.33/24 ≈ 1.4% left of center. Without a nudge this is visible against the filled accent circle.Reproduction
showQueue: falseis fine).Expected: the triangle centered the same way as in
waveform-player(which addsmargin-left: 1pxon the play icon), so both components look consistent.Actual: the triangle is centered by flexbox only and reads as off-center left.
Suggested fix
Add the same optical nudge used by
waveform-player:(or replicate
.waveform-icon-play svg { margin-left: 1px }from the player's CSS).Environment