{displayName}
{displaySubtitle &&{displaySubtitle}
} @@ -455,7 +469,7 @@ export function AccountSwitcher({ disabled={isActive} >stub composer
; }, })); -vi.mock('@/components/layout/sidebar', () => ({ Sidebar: () => null })); +// On a desktop Compose sits at the head of the folder sidebar (mail-13). +vi.mock('@/components/layout/sidebar', () => ({ + Sidebar: ({ onCompose }: { onCompose?: () => void }) => (device.isMobile ? null : ), +})); vi.mock('@/components/layout/navigation-rail', () => ({ NavigationRail: () => null })); vi.mock('@/components/layout/calendar-event-notification-toaster', () => ({ CalendarEventNotificationToaster: () => null })); vi.mock('@/components/layout/share-notification-toaster', () => ({ ShareNotificationToaster: () => null })); @@ -64,9 +67,9 @@ vi.mock('@/hooks/use-pro-multi-account-identities', () => ({ useProMultiAccountI vi.mock('@/hooks/use-pro-multi-account-mailboxes', () => ({ useProMultiAccountMailboxes: () => {} })); vi.mock('@/hooks/use-wopi-status', () => ({ useWopiStatus: () => null, canWopiOpen: () => false })); vi.mock('@/hooks/use-browser-navigation', () => ({ useBrowserNavigation: () => {} })); -const device = vi.hoisted(() => ({ isMobile: true })); +const device = vi.hoisted(() => ({ isMobile: true, isTablet: false })); vi.mock('@/hooks/use-media-query', () => ({ - useDeviceDetection: () => ({ isMobile: device.isMobile, isTablet: false, isDesktop: !device.isMobile }), + useDeviceDetection: () => ({ isMobile: device.isMobile, isTablet: device.isTablet, isDesktop: !device.isMobile && !device.isTablet }), useMediaQuery: () => false, useIsDesktop: () => false, })); @@ -109,6 +112,7 @@ beforeEach(() => { }); afterEach(() => { device.isMobile = true; + device.isTablet = false; vi.restoreAllMocks(); vi.unstubAllGlobals(); }); @@ -123,6 +127,29 @@ describe('Mail after the tour on a phone', () => { expect(listHidden()).toBe(false); }); + // Usability test 2026-11-04, mail-13: on a desktop the round button sat on + // the list's rows; Compose is at the head of the folder sidebar there. + it('draws the round Compose button on a phone, not on a desktop', () => { + const view = render(