From f05af5a5906e32eb152015b3b7a8450da53eab2e Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Wed, 4 Nov 2026 12:57:25 +0100
Subject: [PATCH] fix: keep toasts above a reply draft's card

---
 components/email/__tests__/viewer-reply-draft.test.tsx | 6 ++++++
 components/email/email-viewer.tsx                      | 7 ++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/email/__tests__/viewer-reply-draft.test.tsx b/components/email/__tests__/viewer-reply-draft.test.tsx
index 52fba0c2e..b3dd05f39 100644
--- a/components/email/__tests__/viewer-reply-draft.test.tsx
+++ b/components/email/__tests__/viewer-reply-draft.test.tsx
@@ -68,6 +68,12 @@ describe('a reply draft under its message', () => {
     expect(onDiscard).toHaveBeenCalledTimes(1);
   });
 
+  // compose-p2-17: toasts lift over it as over the quick reply box.
+  it('counts as the quick reply box for the toasts', async () => {
+    await renderViewer({ preview: 'my answer', onEdit: vi.fn(), onDiscard: vi.fn() });
+    expect(screen.getByTestId('reply-draft')).toHaveAttribute('data-quick-reply-box');
+  });
+
   it('keeps the quick reply box when there is none', async () => {
     await renderViewer(null);
     expect(screen.queryByTestId('reply-draft')).toBeNull();
diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index 655ea042b..91e56c5da 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -3527,8 +3527,9 @@ export function EmailViewer({
   // Toasts sit above the quick reply box, as above a composer's footer
   // (compose-p2-17): its height for toast.tsx, as it grows when focused.
   useEffect(() => {
+    // The reply draft's card takes the box's place, and its ref.
     const box = quickReplyBoxRef.current;
-    if (!showQuickReply || !box || typeof ResizeObserver === 'undefined') return;
+    if (!(showQuickReply || showReplyDraft) || !box || typeof ResizeObserver === 'undefined') return;
     const root = document.documentElement;
     const update = () => root.style.setProperty('--quick-reply-height', `${box.offsetHeight}px`);
     update();
@@ -3538,7 +3539,7 @@ export function EmailViewer({
       observer.disconnect();
       root.style.removeProperty('--quick-reply-height');
     };
-  }, [showQuickReply]);
+  }, [showQuickReply, showReplyDraft]);
   // The plain-text body, where reader-above-quote mounts between text and quote.
   const [plainBodyEl, setPlainBodyEl] = useState<HTMLDivElement | null>(null);
   // Read aloud (browser speech): the body as shown, HTML frame or plain text.
@@ -6215,7 +6216,7 @@ ${printWatermark ? printWatermark.html : ''}
 
           {/* The reply already started on this message, as Gmail shows it. */}
           {showReplyDraft && replyDraft && (
-            <div data-testid="reply-draft" className="bg-background border-t border-border px-6 mt-auto" style={{ paddingBlock: 'var(--density-header-py)' }}>
+            <div ref={quickReplyBoxRef} data-quick-reply-box="" data-testid="reply-draft" className="bg-background border-t border-border px-6 mt-auto" style={{ paddingBlock: 'var(--density-header-py)' }}>
               <div className="flex flex-wrap items-center gap-x-3 gap-y-2 rounded-lg border border-border bg-muted/30 px-3 py-2">
                 <span className="inline-flex items-center gap-1.5 text-sm font-medium text-destructive shrink-0">
                   <File className="w-4 h-4" />