From 4e08a973546929acb13432c59253592162e902d3 Mon Sep 17 00:00:00 2001
From: stroblme <stroblme@posteo.de>
Date: Wed, 14 Oct 2026 23:41:28 +0200
Subject: [PATCH] Stat unit sized against the hero numerals: dui-hero on the
 readout's outer span, so the unit's 0.4em is of the hero rather than the 14px
 body text

---
 .../src/components/Dashboard/ui/fluksio/Data.tsx  | 15 ++++++++-------
 .../src/components/Dashboard/ui/glass/Data.tsx    | 15 ++++++++-------
 .../src/components/Dashboard/ui/material/Data.tsx | 15 ++++++++-------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/Dashboard/ui/fluksio/Data.tsx b/frontend/src/components/Dashboard/ui/fluksio/Data.tsx
index 5076548..acde297 100644
--- a/frontend/src/components/Dashboard/ui/fluksio/Data.tsx
+++ b/frontend/src/components/Dashboard/ui/fluksio/Data.tsx
@@ -31,13 +31,14 @@ export function Readout({
 }: ReadoutProps) {
   const { label, numeric } = useAnimatedNumber(value, precision)
   return (
-    <span data-testid="readout" className="flex min-w-0 items-baseline gap-1.5">
-      <span
-        className={cn(
-          "min-w-0 truncate",
-          size === "hero" ? "dui-hero" : "tabular-nums",
-        )}
-      >
+    <span
+      data-testid="readout"
+      className={cn(
+        "flex min-w-0 items-baseline gap-1.5",
+        size === "hero" && "dui-hero",
+      )}
+    >
+      <span className="min-w-0 truncate tabular-nums">
         {numeric ? (
           <motion.span>{label}</motion.span>
         ) : (
diff --git a/frontend/src/components/Dashboard/ui/glass/Data.tsx b/frontend/src/components/Dashboard/ui/glass/Data.tsx
index 859f522..5f499e3 100644
--- a/frontend/src/components/Dashboard/ui/glass/Data.tsx
+++ b/frontend/src/components/Dashboard/ui/glass/Data.tsx
@@ -30,13 +30,14 @@ export function Readout({
 }: ReadoutProps) {
   const { label, numeric } = useAnimatedNumber(value, precision)
   return (
-    <span data-testid="readout" className="flex min-w-0 items-baseline gap-1.5">
-      <span
-        className={cn(
-          "min-w-0 truncate",
-          size === "hero" ? "dui-hero" : "tabular-nums",
-        )}
-      >
+    <span
+      data-testid="readout"
+      className={cn(
+        "flex min-w-0 items-baseline gap-1.5",
+        size === "hero" && "dui-hero",
+      )}
+    >
+      <span className="min-w-0 truncate tabular-nums">
         {numeric ? (
           <motion.span>{label}</motion.span>
         ) : (
diff --git a/frontend/src/components/Dashboard/ui/material/Data.tsx b/frontend/src/components/Dashboard/ui/material/Data.tsx
index 86b0cd2..98a013a 100644
--- a/frontend/src/components/Dashboard/ui/material/Data.tsx
+++ b/frontend/src/components/Dashboard/ui/material/Data.tsx
@@ -29,13 +29,14 @@ export function Readout({
 }: ReadoutProps) {
   const { label, numeric } = useAnimatedNumber(value, precision)
   return (
-    <span data-testid="readout" className="flex min-w-0 items-baseline gap-1.5">
-      <span
-        className={cn(
-          "min-w-0 truncate",
-          size === "hero" ? "dui-hero" : "tabular-nums",
-        )}
-      >
+    <span
+      data-testid="readout"
+      className={cn(
+        "flex min-w-0 items-baseline gap-1.5",
+        size === "hero" && "dui-hero",
+      )}
+    >
+      <span className="min-w-0 truncate tabular-nums">
         {numeric ? (
           <motion.span>{label}</motion.span>
         ) : (