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,29 +493,37 @@ 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}
+        <Slider
-        precision={null}
+          value={typeof value === "number" ? value : min}
-        unit={unit}
+          min={min}
-        size="inline"
+          max={num(cfg.max, 100)}
-      />
+          step={num(cfg.step, 1)}
-      <Slider
+          unit={unit}
-        value={typeof value === "number" ? value : min}
+          // On by default, because a slider without them says how far along it
-        min={min}
+          // is and not what that means. Off is for a short tile: they are the
-        max={num(cfg.max, 100)}
+          // last row of a control that has three, and on a seven-inch panel
-        step={num(cfg.step, 1)}
+          // that row is the difference between fitting and being cut off.
-        unit={unit}
+          ticks={cfg.ticks !== false}
-        // On by default, because a slider without them says how far along it
+          label={widget.title || target}
-        // is and not what that means. Off is for a short tile: they are the
+          disabled={locked}
-        // last row of a control that has three, and on a seven-inch panel
+          onCommit={send}
-        // that row is the difference between fitting and being cut off.
+        />
-        ticks={cfg.ticks !== false}
+      </div>
-        label={widget.title || target}
+      {/* Held to the control's own height, so the value sits on the track's
-        disabled={locked}
+          midline whether or not there is a row of ticks under it. */}
-        onCommit={send}
+      <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>
   )
 }