From fe65ab528b34710bb854fe013e47f45cc5edc32e Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Sat, 31 Oct 2026 02:01:16 +0100
Subject: [PATCH] fix: keep a one-digit unread folder count next to its total

---
 .../__tests__/sidebar-folder-touch-menu.test.tsx      | 11 +++++++++++
 components/layout/sidebar.tsx                         |  4 +++-
 2 files changed, 14 insertions(+), 1 deletion(-)

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(<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', () => {
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 })}
       >