From abbd88b819cd9ee0f1a688442118e1cb24bff574 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Wed, 19 Mar 2025 15:15:31 -0300
Subject: [PATCH] feat: update notification badge to support 99+ (#17007)

After dogfooding the notifications we noticed that admins will probably
have a larger number of unread notifications everyday so with that in
mind we decided to increase the "truncate" rate from 9+ to 99+.
---
 .../NotificationsInbox/UnreadBadge.stories.tsx         | 10 ++++++++--
 .../notifications/NotificationsInbox/UnreadBadge.tsx   |  4 ++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/site/src/modules/notifications/NotificationsInbox/UnreadBadge.stories.tsx b/site/src/modules/notifications/NotificationsInbox/UnreadBadge.stories.tsx
index 1b1ab7c5f3..d3bb608fb7 100644
--- a/site/src/modules/notifications/NotificationsInbox/UnreadBadge.stories.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/UnreadBadge.stories.tsx
@@ -9,14 +9,20 @@ const meta: Meta<typeof UnreadBadge> = {
 export default meta;
 type Story = StoryObj<typeof UnreadBadge>;
 
-export const Default: Story = {
+export const Until10: Story = {
 	args: {
 		count: 3,
 	},
 };
 
-export const MoreThanNine: Story = {
+export const MoreThan10: Story = {
 	args: {
 		count: 12,
 	},
 };
+
+export const MoreThan99: Story = {
+	args: {
+		count: 1000,
+	},
+};
diff --git a/site/src/modules/notifications/NotificationsInbox/UnreadBadge.tsx b/site/src/modules/notifications/NotificationsInbox/UnreadBadge.tsx
index e9d463de30..940c81974d 100644
--- a/site/src/modules/notifications/NotificationsInbox/UnreadBadge.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/UnreadBadge.tsx
@@ -13,13 +13,13 @@ export const UnreadBadge: FC<UnreadBadgeProps> = ({
 	return (
 		<span
 			className={cn([
-				"flex size-[18px] rounded text-2xs items-center justify-center",
+				"flex min-w-[18px] h-[18px] w-fit px-1 rounded text-2xs items-center justify-center",
 				"bg-surface-sky text-highlight-sky",
 				className,
 			])}
 			{...props}
 		>
-			{count > 9 ? "9+" : count}
+			{count > 99 ? "99+" : count}
 		</span>
 	);
 };