From e65373339031a131d7e2ab33165652d5c205648c Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Tue, 20 Oct 2026 20:52:23 +0200
Subject: [PATCH] fix(notifications): a little more room for the unread count,
 with a test

---
 .../components/Layout/InAppNotificationBell.test.tsx  | 11 ++++++++++-
 .../src/components/Layout/InAppNotificationBell.tsx   |  9 +++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Layout/InAppNotificationBell.test.tsx b/client/src/components/Layout/InAppNotificationBell.test.tsx
index b9fe381d7..f9eacd905 100644
--- a/client/src/components/Layout/InAppNotificationBell.test.tsx
+++ b/client/src/components/Layout/InAppNotificationBell.test.tsx
@@ -1,4 +1,4 @@
-// FE-COMP-BELL-001 to FE-COMP-BELL-020
+// FE-COMP-BELL-001 to FE-COMP-BELL-021
 import { render, screen, waitFor } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { vi } from 'vitest';
@@ -238,4 +238,13 @@ describe('InAppNotificationBell', () => {
     // fetchNotifications should be called once per open (2 total)
     expect(fetchNotifications).toHaveBeenCalledTimes(2);
   });
+
+  it('FE-COMP-BELL-021: unread badge is large enough that the count is not squeezed', () => {
+    seedStore(useInAppNotificationStore, { notifications: [], unreadCount: 150, isLoading: false });
+    render(<InAppNotificationBell />);
+    const badge = screen.getByTestId('notification-badge');
+    expect(badge).toHaveTextContent('99+');
+    expect(badge.style.height).toBe('20px');
+    expect(badge.style.minWidth).toBe('20px');
+  });
 });
diff --git a/client/src/components/Layout/InAppNotificationBell.tsx b/client/src/components/Layout/InAppNotificationBell.tsx
index bc9595b54..ce1572acd 100644
--- a/client/src/components/Layout/InAppNotificationBell.tsx
+++ b/client/src/components/Layout/InAppNotificationBell.tsx
@@ -52,12 +52,13 @@ export default function InAppNotificationBell(): React.ReactElement {
         <Bell className="w-4 h-4" />
         {unreadCount > 0 && (
           <span
-            className="absolute -top-1 -end-1 flex items-center justify-center rounded-full text-white font-bold tabular-nums ring-2 ring-surface-card"
+            data-testid="notification-badge"
+            className="absolute -top-1.5 -end-1.5 flex items-center justify-center rounded-full text-white font-bold tabular-nums ring-2 ring-surface-card"
             style={{
               background: '#ef4444',
-              fontSize: 'calc(10px * var(--fs-scale-caption, 1))',
-              minWidth: 18,
-              height: 18,
+              fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))',
+              minWidth: 20,
+              height: 20,
               padding: '0 5px',
               lineHeight: 1,
             }}