From 0ead019c5c9907236a2c7b4f9683d59267101313 Mon Sep 17 00:00:00 2001
From: ibayue <11729209+ibayue@users.noreply.github.com>
Date: Wed, 26 Aug 2026 17:50:27 +0800
Subject: [PATCH] fix(composer): keep From/To/Cc/Bcc/Subject fields pinned
 above the body

Move the fields section out of the composer's scroll container so it
stays visible while scrolling long bodies, matching the pinned
formatting toolbar. Since the fields were the first child of the
scroll container, hoisting them above it is visually identical to
making them sticky - but needs no dynamic offset for the toolbar's
own sticky top (the fields' height varies with Cc/Bcc toggling and
recipient-chip wrapping). The scroll container now wraps only the
body and the signature preview.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/email/email-composer.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/email/email-composer.tsx b/components/email/email-composer.tsx
index b19bb55e0..7e6125436 100644
--- a/components/email/email-composer.tsx
+++ b/components/email/email-composer.tsx
@@ -2598,9 +2598,10 @@ export function EmailComposer({
         )}
       </div>
 
-      <div className="flex-1 min-h-0 overflow-auto">
-        {/* Fields section */}
-        <div className="space-y-0 border-b">
+      {/* Fields section - outside the scroll container so From/To/Cc/Bcc/
+          Subject stay reachable while scrolling long bodies, matching the
+          pinned formatting toolbar (see rich-text-editor.tsx). */}
+      <div className="shrink-0 space-y-0 border-b">
           {/* From field */}
           <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border/50">
             <span className="text-sm text-muted-foreground w-12 md:w-16 shrink-0">{t('from')}:</span>
@@ -2879,8 +2880,9 @@ export function EmailComposer({
               className="flex-1 border-0 focus-visible:ring-0 h-8 px-0 text-sm"
             />
           </div>
-        </div>
+      </div>
 
+      <div className="flex-1 min-h-0 overflow-auto">
         {/* Body */}
         {plainTextMode ? (
           <textarea