From 2bd20b12b48d0cbfdb80181ac54000b1ea417a25 Mon Sep 17 00:00:00 2001
From: Sucukdeluxe <Sucukdeluxe@users.noreply.github.com>
Date: Wed, 26 Aug 2026 15:22:00 +0200
Subject: [PATCH] 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.
---
 src/renderer/styles.css        | 10 ++++++----
 tests/statistics-view.test.tsx |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

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", () => {