From ea84a64567d74e740648d01a4fb19468eada6ac1 Mon Sep 17 00:00:00 2001
From: Tmalone1250 <malonetrevor12@gmail.com>
Date: Wed, 22 Apr 2026 21:02:00 -0500
Subject: [PATCH] fix(dashboard): stabilize RollingChar keys when digit count
 changes (#45)

---
 src/components/dashboard/StatsPanel.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/dashboard/StatsPanel.tsx b/src/components/dashboard/StatsPanel.tsx
index 7879993..cd06320 100644
--- a/src/components/dashboard/StatsPanel.tsx
+++ b/src/components/dashboard/StatsPanel.tsx
@@ -83,9 +83,11 @@ const RollingValue: React.FC<{ value: string }> = ({ value }) => {
   const chars = value.split('');
   return (
     <Box sx={{ display: 'inline-flex', justifyContent: 'center' }}>
-      {chars.map((c, i) => (
-        <RollingChar key={`${chars.length}-${i}`} char={c} />
-      ))}
+      {chars.map((c, i) => {
+        // Calculate index from the right so keys are stable as digit count grows
+        const keyIndex = chars.length - 1 - i;
+        return <RollingChar key={`char-${keyIndex}`} char={c} />;
+      })}
     </Box>
   );
 };