k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-10-22 15:06:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(notifications): a little more room for the unread count, with a test

Browse Source
This commit is contained in:
Maurice
2026-10-20 20:52:23 +02:00
parent 2655e510fc
commit e653733390
2 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Layout/InAppNotificationBell.test.tsx
+10 -1
View File
@@ -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');
});
});
client/src/components/Layout/InAppNotificationBell.tsx
+5 -4
View File
@@ -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,
}}