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>
         ) : (