diff --git a/components/layout/__tests__/sidebar-folder-touch-menu.test.tsx b/components/layout/__tests__/sidebar-folder-touch-menu.test.tsx index c45293071..349511372 100644 --- a/components/layout/__tests__/sidebar-folder-touch-menu.test.tsx +++ b/components/layout/__tests__/sidebar-folder-touch-menu.test.tsx @@ -71,6 +71,17 @@ describe('folder list from the keyboard', () => { const { container } = render( {}} onCreateFolder={() => {}} />); expect(container.querySelectorAll('button button, button [role="button"]')).toHaveLength(0); }); + + it('keeps a one-digit unread count next to the total in its 24px target', () => { + useSettingsStore.setState({ hideAccountSwitcher: true } as never); + const withUnread = mailboxes.map((m) => ({ ...m, unreadEmails: 4, totalEmails: 7 }) as Mailbox); + render( {}} />); + const unread = row('travel').querySelector('[data-testid="folder-counts"] button')!; + expect(unread.textContent).toBe('4'); + expect(unread.className).toContain('min-w-6'); + expect(unread.className).toContain('justify-end'); + expect(unread.className).not.toContain('justify-center'); + }); }); describe('folder list on touch', () => { diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx index 35d990199..b6034f2f1 100644 --- a/components/layout/sidebar.tsx +++ b/components/layout/sidebar.tsx @@ -286,7 +286,9 @@ function SidebarRowCounts({ e.stopPropagation(); onUnreadClick(); }} - className={cn(unreadClass, "inline-flex items-center justify-center min-w-6 min-h-6 -my-1 cursor-pointer hover:underline rounded-sm focus-visible:outline-hidden")} + // 24px to hit, with a short count at the end of it, next to the + // slash and the total, not in the middle with a gap before them. + className={cn(unreadClass, "inline-flex items-center justify-end min-w-6 min-h-6 -my-1 cursor-pointer hover:underline rounded-sm focus-visible:outline-hidden")} title={t('unread_filter', { count: unreadCount })} aria-label={t('unread_filter', { count: unreadCount })} >