Openstatus
www.openstatus.dev
fix: digits and wrap (#989)
authored by
Maximilian Kaske
and committed by
GitHub
7925b569
6e01156a
+16
-12
+16
-12
apps/web/src/components/monitor-dashboard/metrics-card.tsx
+16
-12
apps/web/src/components/monitor-dashboard/metrics-card.tsx
···
60
60
<p className="font-light text-muted-foreground text-sm uppercase">
61
61
{title}
62
62
</p>
63
-
<div className="flex flex-1 items-center gap-2">
64
-
<p className="flex">
65
-
<code className="mr-1 font-mono font-semibold text-xl empty:mr-0">
66
-
{formatNumber(value)}
67
-
</code>
68
-
<span className="self-center text-muted-foreground text-xs">
69
-
{suffix}
70
-
</span>
71
-
</p>
72
-
{delta || delta === 0 ? <DeltaBadge value={delta} /> : null}
63
+
<div>
64
+
<div className="flex flex-1 flex-wrap items-center gap-2">
65
+
<p className="flex">
66
+
<code className="mr-1 font-mono font-semibold text-xl empty:mr-0">
67
+
{formatNumber(value)}
68
+
</code>
69
+
<span className="self-center text-muted-foreground text-xs">
70
+
{suffix}
71
+
</span>
72
+
</p>
73
+
{delta || delta === 0 ? <DeltaBadge value={delta} /> : null}
74
+
</div>
73
75
</div>
74
76
</div>
75
77
);
···
77
79
78
80
export function formatNumber(value?: number | null) {
79
81
return typeof value === "number"
80
-
? new Intl.NumberFormat().format(value)
82
+
? new Intl.NumberFormat(undefined, {
83
+
maximumFractionDigits: 2, // limit to max. 2 decimal places
84
+
}).format(value)
81
85
: null;
82
86
}
83
87
84
88
// --- DeltaBadge.tsx ---
85
89
86
-
const badgeVariants = cva("", {
90
+
const badgeVariants = cva("px-1.5 text-[10px]", {
87
91
variants: {
88
92
variant: {
89
93
default: "border-border",