From e8da96a6256b3748f6fd97f6c2b8e66880b4fa73 Mon Sep 17 00:00:00 2001
From: lucamzanon <luca.m.zanon@gmail.com>
Date: Fri, 9 Oct 2026 09:05:07 +0200
Subject: [PATCH] fix(compose): keep body text from showing through the pinned
 toolbar

The formatting toolbar sticks to the top of the composer while the body
scrolls. Its background was bg-muted/30 with a backdrop blur, and in a
browser that skips backdrop-filter the body text showed sharp under the
buttons. The toolbar now uses the colour bg-muted/30 gives over the
page, made opaque: it looks the same at rest and hides the text when
pinned.
---
 components/email/rich-text-editor.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/components/email/rich-text-editor.tsx b/components/email/rich-text-editor.tsx
index bcfc2e887..5df37e1b5 100644
--- a/components/email/rich-text-editor.tsx
+++ b/components/email/rich-text-editor.tsx
@@ -426,13 +426,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 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">
+          visible while editing long bodies. Its background is the colour
+          bg-muted/30 gives over the page, made opaque: the same at rest, and
+          body text scrolling underneath stays hidden instead of showing
+          through, which a backdrop blur alone did not guarantee (browsers
+          that skip backdrop-filter drew the text sharp under the buttons). */}
+      <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-[color-mix(in_oklab,var(--color-muted)_30%,var(--color-background))]">
         {/* Font size - two baseline-aligned A's read as "size" at a glance;
             once a size is chosen the button shows that number instead. */}
         <div ref={fontSizeWrapperRef} className="relative">