From 99f4a72e80d5521ee2e67a532bceb343ffd925a3 Mon Sep 17 00:00:00 2001
From: Minseo Lee <itoupluk427@gmail.com>
Date: Fri, 30 Aug 2024 21:48:16 +0900
Subject: [PATCH] Update ListTable.tsx

---
 src/components/metrics/ListTable.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/metrics/ListTable.tsx b/src/components/metrics/ListTable.tsx
index 99835b9d0..b06f3a153 100644
--- a/src/components/metrics/ListTable.tsx
+++ b/src/components/metrics/ListTable.tsx
@@ -99,13 +99,17 @@ const AnimatedRow = ({ label, value = 0, percent, change, animate, showPercentag
         <animated.div
           className={styles.value}
           title={props?.y.to((n: number) => intl.formatNumber(n))}
+          style={{ fontVariantNumeric: 'tabular-nums' }}
         >
           {props.y?.to((n: number) => intl.formatNumber(n, formatLongNumberOptions(n)))}
         </animated.div>
       </div>
       {showPercentage && (
         <div className={styles.percent}>
-          <animated.div className={styles.bar} style={{ width: props.width.to(n => `${n}%`) }} />
+          <animated.div
+            className={styles.bar}
+            style={{ width: props.width.to(n => `${n}%`), fontVariantNumeric: 'tabular-nums' }}
+          />
           <animated.span>
             {props.width.to(n => intl.formatNumber(n / 100, { style: 'percent' }))}
           </animated.span>