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:
@@ -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);
|
||||||
|
|||||||
@@ -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", () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user