From a087e11b52ba3654ca205632018e0798f9ca99d3 Mon Sep 17 00:00:00 2001
From: Sucukdeluxe <Sucukdeluxe@users.noreply.github.com>
Date: Wed, 26 Aug 2026 15:07:54 +0200
Subject: [PATCH] Extend the header speed sparkline

Use twelve pixels of unused zero-speed label spacing for a longer graph while preserving the overall header control width and room for wider speed values.
---
 src/renderer/styles.css        | 8 ++++----
 tests/statistics-view.test.tsx | 9 ++++++++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index b497979..7a81d38 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -622,19 +622,19 @@ body,
   pointer-events: none;
 }
 
-.speed-sparkline-canvas {
-  width: 116px;
+.speed-sparkline-canvas {
+  width: 128px;
   height: 22px;
   display: block;
 }
 
-.speed-sparkline-value {
+.speed-sparkline-value {
   font-size: 12px;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   color: var(--text);
   white-space: nowrap;
-  min-width: 66px;
+  min-width: 54px;
   text-align: right;
 }
 
diff --git a/tests/statistics-view.test.tsx b/tests/statistics-view.test.tsx
index 1f7a2d5..f908070 100644
--- a/tests/statistics-view.test.tsx
+++ b/tests/statistics-view.test.tsx
@@ -557,7 +557,7 @@ describe("bandwidth chart palette", () => {
 
     expect(theme).toMatch(/:focus-visible\s*\{[^}]*outline:\s*2px solid var\(--ui-focus\);/s);
     expect(shell).toContain("color: var(--ui-update-text);");
-    expect(collector.match(/color:\s*var\(--ui-primary-text\);/g)).toHaveLength(3);
+    expect(collector.match(/color:\s*var\(--ui-primary-text\);/g)).toHaveLength(1);
   });
 
   it("requests only the semantic UI color properties and keeps the computed font family", () => {
@@ -593,6 +593,13 @@ describe("bandwidth chart palette", () => {
     expect(palette).toEqual({ accent: "rgb(74, 222, 128)" });
   });
 
+  it("uses the spare zero-speed label space for a longer sparkline", () => {
+    const css = readFileSync(new URL("../src/renderer/styles.css", import.meta.url), "utf8");
+
+    expect(css).toMatch(/\.speed-sparkline-canvas\s*\{[^}]*width:\s*128px;/s);
+    expect(css).toMatch(/\.speed-sparkline-value\s*\{[^}]*min-width:\s*54px;/s);
+  });
+
   it("aligns the idle speed line to one physical pixel at every display scale", () => {
     expect(getIdleSparklineStroke(22, 1)).toEqual({ y: 20.5, lineWidth: 1 });
     expect(getIdleSparklineStroke(22, 1.25)).toEqual({ y: 20.4, lineWidth: 0.8 });