Slider value beside the track, the way a bar row reads

It was stacked above the slider, spending a whole row on a number that fits
next to one — and on a tile with ticks that made three rows for one control.
Held to the control's own height so it sits on the track's midline.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

frontend/src/components/Dashboard/widgets.tsx

@@ -493,14 +493,11 @@ function SliderWidget({ widget, dashboard }: WidgetProps) {
 
   const unit = cfg.unit ? text(cfg.unit) : undefined
   return (
-    <div className="grid gap-2">
+    // Value beside the track rather than above it, the way a bar row reads —
+    // one row instead of two, and the tile keeps the height for the control.
+    <div className="flex items-start gap-3">
       {pulse}
-      <Readout
+      <div className="min-w-0 flex-1">
-        value={typeof value === "number" ? value : min}
-        precision={null}
-        unit={unit}
-        size="inline"
-      />
         <Slider
           value={typeof value === "number" ? value : min}
           min={min}
@@ -517,6 +514,17 @@ function SliderWidget({ widget, dashboard }: WidgetProps) {
           onCommit={send}
         />
       </div>
+      {/* Held to the control's own height, so the value sits on the track's
+          midline whether or not there is a row of ticks under it. */}
+      <div className="flex h-[var(--dui-control)] shrink-0 items-center">
+        <Readout
+          value={typeof value === "number" ? value : min}
+          precision={null}
+          unit={unit}
+          size="inline"
+        />
+      </div>
+    </div>
   )
 }