Fluksio/app
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
stroblme
2026-10-14 23:41:28 +02:00
parent e96fa46e0d
commit 4e08a97354
3 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Dashboard/ui/fluksio/Data.tsx
+8 -7
View File
@@ -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>
) : (
frontend/src/components/Dashboard/ui/glass/Data.tsx
+8 -7
View File
@@ -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>
) : (
frontend/src/components/Dashboard/ui/material/Data.tsx
+8 -7
View File
@@ -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>
) : (