From 79f93c486b11b1564e072e90f26fbf5c98bc1ab8 Mon Sep 17 00:00:00 2001
From: waterWang <waterWang@users.noreply.github.com>
Date: Sun, 9 Aug 2026 04:17:17 +0800
Subject: [PATCH] feat(notifications): add tabular-nums to numeric displays on
 NotificationsPanel

Apply font-variant-numeric: tabular-nums on amounts/counts so that
digits align vertically during animation and live updates.

Closes #777
---
 src/pages/NotificationsPanel.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/NotificationsPanel.tsx b/src/pages/NotificationsPanel.tsx
index a5d50d8..3aa19ea 100644
--- a/src/pages/NotificationsPanel.tsx
+++ b/src/pages/NotificationsPanel.tsx
@@ -140,7 +140,7 @@ export default function NotificationsPanel({ maxItems }: NotificationsPanelProps
             <p className="text-sm leading-6 text-muted-foreground">
               {allRead
                 ? "You're all caught up."
-                : `You have ${unreadCount} unread notification${unreadCount === 1 ? "" : "s"}.`}
+                : <>You have <span className="tabular-nums">{unreadCount}</span> unread notification{unreadCount === 1 ? "" : "s"}.</>}
             </p>
           </div>
           {!allRead && (
@@ -198,7 +198,7 @@ export default function NotificationsPanel({ maxItems }: NotificationsPanelProps
         <div className="mx-auto flex max-w-4xl items-center justify-between gap-4 px-4 py-3 sm:px-6 lg:max-w-5xl lg:px-8">
           <div className="flex items-center gap-2 min-w-0">
             <span className="text-sm text-muted-foreground whitespace-nowrap">
-              <span className="font-semibold text-foreground">{unreadCount}</span>
+              <span className="tabular-nums font-semibold text-foreground">{unreadCount}</span>
               {" "}unread
             </span>
             <Badge
@@ -206,7 +206,7 @@ export default function NotificationsPanel({ maxItems }: NotificationsPanelProps
               size="sm"
               className="hidden shrink-0 sm:inline-flex"
             >
-              {notifications.length} total
+              <span className="tabular-nums">{notifications.length}</span> total
             </Badge>
           </div>