From 4f8e7d7bc7f3f807490a41659cfd5043ee9a3e53 Mon Sep 17 00:00:00 2001 From: Joshua Bassett Date: Mon, 30 Mar 2026 21:17:50 +1100 Subject: [PATCH] fix: stabilize waveform seekbar width when player time changes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add min-width to .player-time elements so they don't resize when the displayed time string changes length (e.g. "9:59" → "10:00"). Not all fonts support the tabular-nums font-variant, so without a min-width the time elements can change size and cause the waveform seekbar to continuously resize as playback progresses. Also align the elapsed time to the right and duration to the left so they sit flush against the waveform edges. Co-Authored-By: Claude Opus 4.6 (1M context) --- src/styles/layout.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/styles/layout.css b/src/styles/layout.css index fd105480..846b18fa 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -632,6 +632,15 @@ font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; + min-width: 2.5rem; +} + +.player-time:first-child { + text-align: right; +} + +.player-time:last-child { + text-align: left; } /* Volume section */