mirror of
https://github.com/multica-ai/multica.git
synced 2026-07-05 13:29:44 +02:00
fix(issues): sync sticky comment header background with highlight fade (MUL-3759)
The deep-link highlight tint faded out over 700ms on the comment body layers but the sticky header's background switched instantly, and its 4px bottom `after` gradient band recolored by class-switching that `transition-colors` cannot animate. Both desynced from the body during the fade, showing a white header and a pale seam under it. Add `transition-colors duration-700` to the sticky shell so the header background fades with the body, and make the `after` band derive its color from the header via `bg-[inherit]` + a `mask-image` fade instead of a per-state gradient color, so all three layers are driven by the single header background transition. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -46,8 +46,6 @@ import { deriveThreadResolution } from "./thread-utils";
|
||||
|
||||
const highlightedCommentBackgroundClass =
|
||||
"bg-[color-mix(in_srgb,var(--card)_95%,var(--brand)_5%)]";
|
||||
const highlightedCommentFadeClass =
|
||||
"after:from-[color-mix(in_srgb,var(--card)_95%,var(--brand)_5%)]";
|
||||
|
||||
function StickyHeaderShell({
|
||||
className,
|
||||
@@ -67,9 +65,8 @@ function StickyHeaderShell({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"sticky top-0 z-10 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-1 after:bg-gradient-to-b after:to-transparent",
|
||||
"sticky top-0 z-10 transition-colors duration-700 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-1 after:bg-[inherit] after:[mask-image:linear-gradient(to_bottom,#000,transparent)] after:[-webkit-mask-image:linear-gradient(to_bottom,#000,transparent)]",
|
||||
highlighted ? highlightedCommentBackgroundClass : "bg-card",
|
||||
highlighted ? highlightedCommentFadeClass : "after:from-card",
|
||||
)}
|
||||
>
|
||||
<div className={className}>
|
||||
|
||||
Reference in New Issue
Block a user