fix: stat card sub-text on separate line below main number

The sub-text (e.g. "36 active", "30 total") was rendering inline
next to the large number, creating confusing "36₃₆ active" appearance.
Fixed by wrapping the number in a block <div> and the sub-text in a
block <p>, ensuring they stack vertically.

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
2026-03-22 22:05:55 +01:00
parent 0f129dc0de
commit 3d117708ff
@@ -59,11 +59,13 @@ function StatCard({
</ProgressRing> </ProgressRing>
</div> </div>
) : ( ) : (
<span className="mt-2 text-2xl font-semibold text-gray-900 dark:text-gray-50"> <div className="mt-2">
<AnimatedNumber value={value} suffix={suffix} /> <span className="text-2xl font-semibold text-gray-900 dark:text-gray-50">
</span> <AnimatedNumber value={value} suffix={suffix} />
</span>
</div>
)} )}
{sub && <span className="mt-1 text-xs text-gray-500 dark:text-gray-400">{sub}</span>} {sub && <p className="mt-0.5 text-xs text-gray-400 dark:text-gray-500">{sub}</p>}
</div> </div>
</FadeIn> </FadeIn>
); );