starred/webmail
1
0
Fork 0
mirror of https://github.com/bulwarkmail/webmail.git synced 2026-10-31 08:13:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(composer): keep toolbar background at main's exact muted/30

Browse Source 
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>
This commit is contained in:
ibayue
2026-09-07 16:58:51 +08:00
co-authored by Claude
parent 08e279d21d
commit 8fbe508ba3
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/email/rich-text-editor.tsx
+7 -6
View File
@@ -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