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}
+
)}
>
)}