From c46e37350b8c05be716632fdf4c4b9ca68a2c645 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Wed, 14 Oct 2026 14:17:25 +0200
Subject: [PATCH] fix: keep plugin buttons in the composer's bottom bar from
 running over Discard

---
 components/email/__tests__/composer-plugin-surfaces.test.tsx | 5 +++++
 components/email/composer-toolbar-menu.tsx                   | 4 +++-
 components/email/email-composer.tsx                          | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/email/__tests__/composer-plugin-surfaces.test.tsx b/components/email/__tests__/composer-plugin-surfaces.test.tsx
index 73dacdb35..02c24baf8 100644
--- a/components/email/__tests__/composer-plugin-surfaces.test.tsx
+++ b/components/email/__tests__/composer-plugin-surfaces.test.tsx
@@ -366,6 +366,11 @@ describe('composer-options-menu and composer-toolbar-actions', () => {
     const button = screen.getByRole('button', { name: 'Assistant' });
     expect(button).toHaveAttribute('title', 'Assistant (Alt+A)');
     expect(button.className).toContain('h-9');
+    // Icon only unless the bar is wide enough for the label next to the app's buttons.
+    expect(button.querySelector('span')!.className).toContain('@[44rem]/composer-bar:inline');
+    let bar: HTMLElement | null = button;
+    while (bar && !bar.classList.contains('@container/composer-bar')) bar = bar.parentElement;
+    expect(bar).not.toBeNull();
     // Not in the plugin frame row above the bar.
     expect(button.closest('[data-composer-plugin-row]')).toBeNull();
     await act(async () => { fireEvent.click(button); });
diff --git a/components/email/composer-toolbar-menu.tsx b/components/email/composer-toolbar-menu.tsx
index 0c7c26c34..b0a9925f1 100644
--- a/components/email/composer-toolbar-menu.tsx
+++ b/components/email/composer-toolbar-menu.tsx
@@ -178,7 +178,9 @@ export function ComposerPluginToolbarButtons({ surface, context }: { surface: "c
             onClick={() => { void runAction(action, surface, context()); }}
           >
             <Icon className="w-4 h-4" />
-            <span className="hidden sm:inline text-sm">{action.label}</span>
+            {/* The label only when the bar has room for it next to the app's own
+                buttons; otherwise the icon, with the label as tooltip. */}
+            <span className="hidden @[44rem]/composer-bar:inline text-sm">{action.label}</span>
           </Button>
         );
       })}
diff --git a/components/email/email-composer.tsx b/components/email/email-composer.tsx
index ceb8a8a59..14e89eca7 100644
--- a/components/email/email-composer.tsx
+++ b/components/email/email-composer.tsx
@@ -3995,7 +3995,7 @@ export function EmailComposer({
         <div
           data-mv-compose-footer={mvWindow ? "" : undefined}
           className={cn(
-            "flex items-center justify-between px-4 py-2.5 bg-background shrink-0 pb-[calc(0.625rem+env(safe-area-inset-bottom)/2)]",
+            "@container/composer-bar flex items-center justify-between px-4 py-2.5 bg-background shrink-0 pb-[calc(0.625rem+env(safe-area-inset-bottom)/2)]",
             mvWindow ? "gap-1" : "border-t",
           )}
         >