From 08e279d21ddade8a33c5dba0ccff8778ec789e1c Mon Sep 17 00:00:00 2001
From: ibayue <11729209+ibayue@users.noreply.github.com>
Date: Wed, 26 Aug 2026 17:59:00 +0800
Subject: [PATCH] fix(composer): restore main's translucent toolbar look

The sticky rework had swapped the toolbar background to opaque
bg-muted, which reads darker than main's bg-muted/30. Restore the
translucent background and pair it with backdrop-blur + a slightly
stronger muted overlay (only when backdrop-filter is supported) so
pinned-on-body-text stays legible without the flat solid band.
Also pin the font-size button's line height so the toolbar's row
height matches main exactly.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/email/rich-text-editor.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/email/rich-text-editor.tsx b/components/email/rich-text-editor.tsx
index 1af370512..856eefe1d 100644
--- a/components/email/rich-text-editor.tsx
+++ b/components/email/rich-text-editor.tsx
@@ -375,10 +375,12 @@ export function RichTextEditor({
   return (
     <div className={cn("flex flex-col", hasError && "ring-2 ring-red-500 dark:ring-red-400 rounded", className)}>
       {/* Toolbar - sticky within the composer's scroll container so it stays
-          visible while editing long bodies (the fields section scrolls away
-          above it; the opaque background keeps body text from bleeding
-          through while pinned). */}
-      <div className="sticky top-0 z-20 flex flex-wrap items-center gap-0.5 px-3 py-1.5 border-b border-border/50 bg-muted">
+          visible while editing long bodies. The resting look matches main
+          (bg-muted/30); once the toolbar actually pins against the top of the
+          scroll container, the backdrop-blur + translucent muted overlay keeps
+          body text from bleeding through while staying visually identical to
+          the translucent background. */}
+      <div className="sticky top-0 z-20 flex flex-wrap items-center gap-0.5 px-3 py-1.5 border-b border-border/50 bg-muted/30 backdrop-blur-sm supports-[backdrop-filter]:bg-muted/70">
         {/* Font size */}
         <div ref={fontSizeWrapperRef} className="relative">
           <ToolbarButton
@@ -386,7 +388,7 @@ export function RichTextEditor({
             onClick={() => setFontSizeMenuOpen((v) => !v)}
             title={tToolbar("font_size")}
           >
-            <span className="text-xs font-medium min-w-6 text-center">
+            <span className="text-xs font-medium min-w-6 text-center leading-4">
               {currentFontSize ? currentFontSize.replace("px", "") : "Aa"}
             </span>
           </ToolbarButton>