Split speed graph and value into separate modules

Render the 150-pixel sparkline and fixed-width speed label as independent bordered pills so changing digit counts cannot move or resize the graph.

src/renderer/App.tsx

@@ -1403,7 +1403,9 @@ const DownloadSpeedSparkline = memo(function DownloadSpeedSparkline({ speedBps,
 
   return (
     <div className={`speed-sparkline${hidden ? " speed-sparkline-hidden" : ""}`} aria-hidden={hidden} title="Aktuelle Download-Geschwindigkeit (geglättet)">
-      <canvas ref={canvasRef} className="speed-sparkline-canvas" />
+      <div className="speed-sparkline-graph">
+        <canvas ref={canvasRef} className="speed-sparkline-canvas" />
+      </div>
       <span className="speed-sparkline-value">{speedBps > 0 ? formatSpeedMbps(speedBps) : "0 B/s"}</span>
     </div>
   );

src/renderer/styles.css

@@ -607,14 +607,19 @@ body,
 }
 
 .speed-sparkline {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 30px;
-  padding: 0 10px;
-  background: var(--field);
-  border: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+}
+
+.speed-sparkline-graph,
+.speed-sparkline-value {
+  background: var(--field);
+  border: 1px solid var(--border);
   border-radius: 8px;
+  box-sizing: content-box;
+  height: 30px;
 }
 
 .speed-sparkline-hidden {
@@ -626,12 +631,22 @@ body,
   width: 150px;
   height: 22px;
   display: block;
-}
-
+}
+
+.speed-sparkline-graph {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+}
+
 .speed-sparkline-value {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
   flex: 0 0 12ch;
   width: 12ch;
   min-width: 12ch;
+  padding: 0 10px;
   font-size: 12px;
   font-weight: 600;
   font-variant-numeric: tabular-nums;

tests/statistics-view.test.tsx

@@ -595,9 +595,12 @@ describe("bandwidth chart palette", () => {
 
   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");
+    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(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);
   });
 
   it("aligns the idle speed line to one physical pixel at every display scale", () => {