From 8fbe508ba35a4472dbac8377ebb68e7ddc95207f Mon Sep 17 00:00:00 2001
From: ibayue <11729209+ibayue@users.noreply.github.com>
Date: Wed, 26 Aug 2026 18:05:45 +0800
Subject: [PATCH] fix(composer): keep toolbar background at main's exact
 muted/30

The previous fix paired bg-muted/30 with
supports-[backdrop-filter]:bg-muted/70, intending a fallback for
browsers without backdrop-filter - but every modern browser supports
it, so the 70%-opaque variant was always active and the toolbar read
darker than main at rest. Drop the override entirely: the background
is bg-muted/30 in every state, identical to main, and pinned
legibility comes from backdrop-blur-sm alone (blurring a solid page
background is a no-op at rest; it only softens body text sliding
underneath once the toolbar is pinned).

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

diff --git a/components/email/rich-text-editor.tsx b/components/email/rich-text-editor.tsx
index 856eefe1d..ba0922666 100644
--- a/components/email/rich-text-editor.tsx
+++ b/components/email/rich-text-editor.tsx
@@ -375,12 +375,13 @@ 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 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">
+          visible while editing long bodies. The background stays at main's
+          bg-muted/30 in every state - backdrop-blur has no visual effect while
+          the toolbar rests on the solid page background, and blurs body text
+          sliding underneath only once pinned, so pinned legibility needs no
+          extra opaque overlay (an always-on stronger overlay would read darker
+          than main even at rest). */}
+      <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">
         {/* Font size */}
         <div ref={fontSizeWrapperRef} className="relative">
           <ToolbarButton