From 94f6d304256a7901f8ccdf2efa3520248fb9ca3a Mon Sep 17 00:00:00 2001
From: Darius Daniel <dariusdaniel771@gmail.com>
Date: Tue, 28 Jul 2026 22:52:39 +0100
Subject: [PATCH] style: apply tabular-nums to numeric values in
 RatingHistogram

---
 src/components/RatingHistogram.tsx | 11 ++++++++++-
 src/index.css                      |  1 +
 src/styles/typography.css          |  4 ++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/RatingHistogram.tsx b/src/components/RatingHistogram.tsx
index 433f07f..db57285 100644
--- a/src/components/RatingHistogram.tsx
+++ b/src/components/RatingHistogram.tsx
@@ -180,7 +180,13 @@ export default function RatingHistogram({
               marginBottom: "12px",
             }}
           >
-            <strong style={{ fontSize: "1.5rem", color: "var(--text)" }}>
+            <strong
+              style={{
+                fontSize: "1.5rem",
+                color: "var(--text)",
+                fontVariantNumeric: "tabular-nums",
+              }}
+            >
               {rating.toFixed(1)}
             </strong>
             <div style={{ color: "var(--muted)", fontSize: "0.85rem" }}>
@@ -192,6 +198,7 @@ export default function RatingHistogram({
                   marginLeft: "auto",
                   color: "var(--muted)",
                   fontSize: "0.75rem",
+                  fontVariantNumeric: "tabular-nums",
                 }}
               >
                 {total} {total === 1 ? "review" : "reviews"}
@@ -220,6 +227,7 @@ export default function RatingHistogram({
                       textAlign: "right",
                       color: "var(--text)",
                       whiteSpace: "nowrap",
+                      fontVariantNumeric: "tabular-nums",
                     }}
                   >
                     {star} ★
@@ -248,6 +256,7 @@ export default function RatingHistogram({
                       width: "28px",
                       textAlign: "right",
                       color: "var(--muted)",
+                      fontVariantNumeric: "tabular-nums",
                     }}
                   >
                     {count}
diff --git a/src/index.css b/src/index.css
index b641dac..574434e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1770,6 +1770,7 @@ code,
   color: var(--text);
   font-size: 1rem;
   font-weight: 700;
+  font-variant-numeric: tabular-nums;
   line-height: 1.3;
   white-space: nowrap;
 }
diff --git a/src/styles/typography.css b/src/styles/typography.css
index 3b09294..04b97d7 100644
--- a/src/styles/typography.css
+++ b/src/styles/typography.css
@@ -5,4 +5,8 @@
    readouts across light and dark themes. */
 .tabular-nums {
   font-variant-numeric: tabular-nums;
+}
+
+.numeric-tabular {
+  font-variant-numeric: tabular-nums;
 }
\ No newline at end of file