fix(player): stable playbar clocks when showing remaining time (#987)

* chore: restore PR order in CHANGELOG [1.47.0] Fixed section

Re-sort ### blocks ascending by PR number per release-note placement rules after out-of-order Discord-fix batch inserts.

* fix(player): stable playbar clocks when showing remaining time

Pad seekbar time strings to a fixed width so ticking remaining time does not resize WaveformSeek via ResizeObserver; tighten clock-to-waveform spacing and keep the toggle icon inline.

* docs: CHANGELOG and credits for playbar remaining-time fix (PR #987)

* docs: CHANGELOG entry for playbar remaining-time waveform fix (#987)

* chore: drop settingsCredits entry for minor playbar fix (#987)

* docs: move #987 CHANGELOG entry to end of [1.47.0] Fixed section
This commit is contained in:
cucadmuh
2026-06-04 17:53:36 +03:00
committed by GitHub
parent 6da98e476b
commit ca502ad833
7 changed files with 354 additions and 143 deletions
+23 -3
View File
@@ -279,7 +279,7 @@ html[data-platform="windows"] .player-bar.floating {
min-width: 0;
display: flex;
align-items: center;
gap: var(--space-2);
gap: 4px;
margin-left: 24px;
margin-right: 24px;
}
@@ -298,7 +298,10 @@ html[data-platform="windows"] .player-bar.floating {
min-width: 2.5rem;
}
.player-time:first-child {
.player-waveform-section > .player-time:first-child {
flex: 0 0 calc(var(--playbar-clock-body-ch, 4) * 1ch);
width: calc(var(--playbar-clock-body-ch, 4) * 1ch);
min-width: unset;
text-align: right;
}
@@ -307,15 +310,32 @@ html[data-platform="windows"] .player-bar.floating {
}
/* Clickable time toggle with swap indicator */
.player-time.player-time-toggle {
min-width: unset;
}
.player-time-toggle {
cursor: pointer;
display: inline-flex;
align-items: center;
padding: 2px 4px;
gap: 2px;
flex-shrink: 0;
padding: 2px 0 2px 2px;
border-radius: 4px;
transition: background-color 0.15s, color 0.15s;
}
.player-time-toggle__label {
flex: 0 0 calc(var(--playbar-clock-signed-ch, 5) * 1ch);
width: calc(var(--playbar-clock-signed-ch, 5) * 1ch);
font-variant-numeric: tabular-nums;
}
.player-time-toggle__icon {
flex-shrink: 0;
opacity: 0.6;
}
.player-time-toggle:hover {
background-color: var(--surface-hover, rgba(128, 128, 128, 0.2));
color: var(--text-primary);