From 60be829cf401cd862d888d874af359da3d9f72c7 Mon Sep 17 00:00:00 2001
From: stroblme <stroblme@posteo.de>
Date: Thu, 27 Aug 2026 16:15:26 +0200
Subject: [PATCH] Slider value beside the track, the way a bar row reads
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 frontend/src/components/Dashboard/widgets.tsx | 52 +++++++++++--------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/Dashboard/widgets.tsx b/frontend/src/components/Dashboard/widgets.tsx
index b069332..63e2c36 100644
--- a/frontend/src/components/Dashboard/widgets.tsx
+++ b/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
-        value={typeof value === "number" ? value : min}
-        precision={null}
-        unit={unit}
-        size="inline"
-      />
-      <Slider
-        value={typeof value === "number" ? value : min}
-        min={min}
-        max={num(cfg.max, 100)}
-        step={num(cfg.step, 1)}
-        unit={unit}
-        // On by default, because a slider without them says how far along it
-        // is and not what that means. Off is for a short tile: they are the
-        // last row of a control that has three, and on a seven-inch panel
-        // that row is the difference between fitting and being cut off.
-        ticks={cfg.ticks !== false}
-        label={widget.title || target}
-        disabled={locked}
-        onCommit={send}
-      />
+      <div className="min-w-0 flex-1">
+        <Slider
+          value={typeof value === "number" ? value : min}
+          min={min}
+          max={num(cfg.max, 100)}
+          step={num(cfg.step, 1)}
+          unit={unit}
+          // On by default, because a slider without them says how far along it
+          // is and not what that means. Off is for a short tile: they are the
+          // last row of a control that has three, and on a seven-inch panel
+          // that row is the difference between fitting and being cut off.
+          ticks={cfg.ticks !== false}
+          label={widget.title || target}
+          disabled={locked}
+          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>
   )
 }