diff --git a/components/email/__tests__/viewer-send-failures.test.tsx b/components/email/__tests__/viewer-send-failures.test.tsx index af294f81c..b30599f14 100644 --- a/components/email/__tests__/viewer-send-failures.test.tsx +++ b/components/email/__tests__/viewer-send-failures.test.tsx @@ -282,3 +282,23 @@ describe('viewer send failures', () => { }); }); }); + +describe('recipients in the header', () => { + it('puts the comma after a name and makes Cc "+N" open the full list', () => { + const { container } = render( + , + ); + const alice = screen.getAllByText('Alice Johnson')[0].closest('span.inline-flex')!; + expect(alice.textContent).toBe('Alice Johnson,'); + expect(container.textContent).not.toContain('+1'); + expect(screen.getAllByRole('button', { name: 'more_count' }).length).toBeGreaterThan(0); + }); +}); diff --git a/components/email/email-list.tsx b/components/email/email-list.tsx index f89fd4e7f..5891f180c 100644 --- a/components/email/email-list.tsx +++ b/components/email/email-list.tsx @@ -182,6 +182,7 @@ export function EmailList({ const tNotifications = useTranslations('notifications'); const tViewer = useTranslations('email_viewer'); const tSidebar = useTranslations('sidebar'); + const mountainViewList = useSettingsStore((state) => state.interfaceLayout === 'mountain-view'); const undo = undoLabels(tNotifications); const { client } = useAuthStore(useShallow((state) => ({ client: state.client }))); const { @@ -1055,7 +1056,9 @@ export function EmailList({ // The mail shell's "Skip to message list" lands here. id="message-list" tabIndex={-1} - className="flex-1 overflow-y-auto bg-background relative outline-none" + // Room under the last row for the round Compose button, which would + // otherwise sit on that row's actions (Mountain View has no such button). + className={cn("flex-1 overflow-y-auto bg-background relative outline-none", !mountainViewList && "pb-20")} data-tour="email-list" // The column header above keeps the same gutter, so its titles stay over the columns. style={listColumns ? { scrollbarGutter: 'stable' } : undefined} diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx index c100e6085..3a980eb49 100644 --- a/components/email/email-viewer.tsx +++ b/components/email/email-viewer.tsx @@ -424,7 +424,6 @@ function renderClickableRecipients( return ( - {index > 0 && ,} + {index < visible.length - 1 && ,} ); }); @@ -3847,7 +3847,7 @@ export function EmailViewer({ title={t('send_now')} > - {showToolbarLabels && {t('send_now')}} + {showToolbarLabels && {t('send_now')}} {onCancelScheduledSend && !email.isSmimeScheduled && ( )} @@ -3897,7 +3897,7 @@ export function EmailViewer({ title={t('tooltips.reply')} > - {showToolbarLabels && {t('reply')}} + {showToolbarLabels && {t('reply')}} )} @@ -4088,7 +4088,7 @@ export function EmailViewer({ title={t('print')} > - {showToolbarLabels && {t('print')}} + {showToolbarLabels && {t('print')}} )} @@ -4998,7 +4998,7 @@ export function EmailViewer({ {email.to.length > 2 && ( @@ -5011,7 +5011,12 @@ export function EmailViewer({ {t('cc')}: {renderClickableRecipients(email.cc, currentUserEmail, t, handleViewContactSidebar)} {email.cc.length > 2 && ( - +{email.cc.length - 2} + )} )} @@ -5271,7 +5276,12 @@ export function EmailViewer({ {t('cc')}: {renderClickableRecipients(email.cc, currentUserEmail, t, handleViewContactSidebar)} {email.cc.length > 2 && ( - +{email.cc.length - 2} + )} )}