Skip to content

Play triangle is not optically centered in the round play button #1

Description

@sporteka2

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

  1. Create a page with a WaveformBar (default showQueue: false is fine).
  2. Play any track and look at the filled round play button in the bar.
  3. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions