From dcb088feec876479f65c23c0b976b598857b0c02 Mon Sep 17 00:00:00 2001
From: Sucukdeluxe <Sucukdeluxe@users.noreply.github.com>
Date: Wed, 26 Aug 2026 15:27:49 +0200
Subject: [PATCH] Tighten the speed value module

Reduce the dedicated speed pill to ten character units with smaller horizontal padding while keeping its width fixed across changing values.
---
 src/renderer/styles.css        | 8 ++++----
 tests/statistics-view.test.tsx | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 84fd728..827909f 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -643,10 +643,10 @@ body,
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  flex: 0 0 12ch;
-  width: 12ch;
-  min-width: 12ch;
-  padding: 0 10px;
+  flex: 0 0 10ch;
+  width: 10ch;
+  min-width: 10ch;
+  padding: 0 8px;
   font-size: 12px;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
diff --git a/tests/statistics-view.test.tsx b/tests/statistics-view.test.tsx
index f24f849..10c4084 100644
--- a/tests/statistics-view.test.tsx
+++ b/tests/statistics-view.test.tsx
@@ -598,7 +598,7 @@ describe("bandwidth chart palette", () => {
     const source = readFileSync(new URL("../src/renderer/App.tsx", import.meta.url), "utf8");
 
     expect(css).toMatch(/\.speed-sparkline-canvas\s*\{[^}]*width:\s*150px;/s);
-    expect(css).toMatch(/\.speed-sparkline-value\s*\{[^}]*flex:\s*0 0 12ch;[^}]*width:\s*12ch;[^}]*min-width:\s*12ch;/s);
+    expect(css).toMatch(/\.speed-sparkline-value\s*\{[^}]*flex:\s*0 0 10ch;[^}]*width:\s*10ch;[^}]*min-width:\s*10ch;[^}]*padding:\s*0 8px;/s);
     expect(source).toContain('className="speed-sparkline-graph"');
     expect(css).toMatch(/\.speed-sparkline-graph,\s*\.speed-sparkline-value\s*\{[^}]*background:\s*var\(--field\);[^}]*border:\s*1px solid var\(--border\);[^}]*border-radius:\s*8px;/s);
   });