From 3d117708ff9f1c7429976aec20b8dfe20ac06309 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Sun, 22 Mar 2026 22:05:55 +0100
Subject: [PATCH] fix: stat card sub-text on separate line below main number
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/dashboard/widgets/StatCardsWidget.tsx   | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/dashboard/widgets/StatCardsWidget.tsx b/apps/web/src/components/dashboard/widgets/StatCardsWidget.tsx
index ba097f4..beab32b 100644
--- a/apps/web/src/components/dashboard/widgets/StatCardsWidget.tsx
+++ b/apps/web/src/components/dashboard/widgets/StatCardsWidget.tsx
@@ -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>
   );