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;