diff --git a/src/renderer/styles.css b/src/renderer/styles.css index fee19e5..b6dba04 100644 --- a/src/renderer/styles.css +++ b/src/renderer/styles.css @@ -629,14 +629,16 @@ body, } .speed-sparkline-value { - font-size: 12px; + flex: 0 0 12ch; + width: 12ch; + min-width: 12ch; + font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; - min-width: 32px; - text-align: right; -} + text-align: right; +} .tab { background: var(--tab-bg); diff --git a/tests/statistics-view.test.tsx b/tests/statistics-view.test.tsx index 8a4e3f6..d206446 100644 --- a/tests/statistics-view.test.tsx +++ b/tests/statistics-view.test.tsx @@ -597,7 +597,7 @@ describe("bandwidth chart palette", () => { 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-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", () => {