fix: keep a one-digit unread folder count next to its total

This commit is contained in:
Linus Rath
2026-10-31 02:01:16 +01:00
parent 5340499520
commit fe65ab528b
2 changed files with 14 additions and 1 deletions
@@ -71,6 +71,17 @@ describe('folder list from the keyboard', () => {
const { container } = render(<Sidebar mailboxes={withUnread} selectedMailbox="inbox" onUnreadFilterClick={() => {}} 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(<Sidebar mailboxes={withUnread} selectedMailbox="inbox" onUnreadFilterClick={() => {}} />);
const unread = row('travel').querySelector<HTMLElement>('[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', () => {
+3 -1
View File
@@ -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 })}
>