Keep speed graph position stable across values

Reserve a fixed twelve-character label column so one-, two-, and three-digit speed values cannot resize the header control or shift the 150-pixel sparkline.
This commit is contained in:
Sucukdeluxe
2026-08-26 15:22:00 +02:00
parent 16037b264f
commit 2bd20b12b4
2 changed files with 7 additions and 5 deletions
+6 -4
View File
@@ -629,14 +629,16 @@ body,
} }
.speed-sparkline-value { .speed-sparkline-value {
font-size: 12px; flex: 0 0 12ch;
width: 12ch;
min-width: 12ch;
font-size: 12px;
font-weight: 600; font-weight: 600;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
color: var(--text); color: var(--text);
white-space: nowrap; white-space: nowrap;
min-width: 32px; text-align: right;
text-align: right; }
}
.tab { .tab {
background: var(--tab-bg); background: var(--tab-bg);
+1 -1
View File
@@ -597,7 +597,7 @@ describe("bandwidth chart palette", () => {
const css = readFileSync(new URL("../src/renderer/styles.css", import.meta.url), "utf8"); const css = readFileSync(new URL("../src/renderer/styles.css", import.meta.url), "utf8");
expect(css).toMatch(/\.speed-sparkline-canvas\s*\{[^}]*width:\s*150px;/s); expect(css).toMatch(/\.speed-sparkline-canvas\s*\{[^}]*width:\s*150px;/s);
expect(css).toMatch(/\.speed-sparkline-value\s*\{[^}]*min-width:\s*32px;/s); expect(css).toMatch(/\.speed-sparkline-value\s*\{[^}]*flex:\s*0 0 12ch;[^}]*width:\s*12ch;[^}]*min-width:\s*12ch;/s);
}); });
it("aligns the idle speed line to one physical pixel at every display scale", () => { it("aligns the idle speed line to one physical pixel at every display scale", () => {