Stabilize panel speed label width
Cap formatBytesShort at four characters by rolling the mantissa up to the next unit once it reaches 1000, and give .sbx-speed-label a fixed min-width so the panel widget no longer shifts horizontally as speed values change. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
+8
-1
@@ -21,8 +21,15 @@ export function formatBytes(n) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Compact for the panel: "2.4M", "120K", "0".
|
// Compact for the panel: "2.4M", "120K", "0".
|
||||||
|
// Keeps the mantissa under three integer digits so a value is at most four
|
||||||
|
// characters wide ("999K", "9.9M", "1023") — the panel field has a fixed width
|
||||||
|
// and must never overflow it (see .sbx-speed-label in stylesheet.css).
|
||||||
export function formatBytesShort(n) {
|
export function formatBytesShort(n) {
|
||||||
const [v, i] = scale(n);
|
let [v, i] = scale(n);
|
||||||
|
if (i > 0 && v >= 1000 && i < SHORT_UNITS.length - 1) {
|
||||||
|
v /= 1024;
|
||||||
|
i += 1;
|
||||||
|
}
|
||||||
if (i === 0)
|
if (i === 0)
|
||||||
return `${Math.round(v)}`;
|
return `${Math.round(v)}`;
|
||||||
const digits = v < 10 ? 1 : 0;
|
const digits = v < 10 ? 1 : 0;
|
||||||
|
|||||||
@@ -15,6 +15,10 @@
|
|||||||
.sbx-speed-label {
|
.sbx-speed-label {
|
||||||
font-feature-settings: "tnum";
|
font-feature-settings: "tnum";
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
|
/* Fixed width so the panel widget doesn't shift as speed values change.
|
||||||
|
Sized for the widest field: "↓1023 ↑1023" (see formatBytesShort). */
|
||||||
|
min-width: 7.5em;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sbx-status-item {
|
.sbx-status-item {
|
||||||
|
|||||||
Reference in New Issue
Block a user