feat: update notification badge to support 99+ (#17007)

BrunoQuaresma · web-flow · commit abbd88b819cd · 2025-03-19T15:15:31.000-03:00
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+.
diff --git 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
@@ -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>
 	);
 };
