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:
@@ -59,11 +59,13 @@ function StatCard({
|
||||
</ProgressRing>
|
||||
</div>
|
||||
) : (
|
||||
<span className="mt-2 text-2xl font-semibold text-gray-900 dark:text-gray-50">
|
||||
<AnimatedNumber value={value} suffix={suffix} />
|
||||
</span>
|
||||
<div className="mt-2">
|
||||
<span className="text-2xl font-semibold text-gray-900 dark:text-gray-50">
|
||||
<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>
|
||||
</FadeIn>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user