mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 12:32:43 +00:00
fix(insights): isolate hero glow from sticky section nav
The hero band's glow-purple box-shadow bled through the sticky section nav (bg-background/80 + backdrop-blur) so the nav painted with a faint purple cast on scroll. Add `isolate` to the hero container so the shadow stays z-trapped inside its own stacking context. Fixes Design-HIGH-4. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
f9af100d9d
commit
346867b468
1 file changed
+6
-1
@@ -182,7 +182,12 @@ export function HeroStrip({
|
|||||||
data-slot="insights-hero-strip"
|
data-slot="insights-hero-strip"
|
||||||
className={cn(
|
className={cn(
|
||||||
"hero-gradient glow-purple animate-insight-in",
|
"hero-gradient glow-purple animate-insight-in",
|
||||||
"relative overflow-hidden rounded-xl px-4 py-5 sm:px-6 sm:py-6",
|
// `isolate` creates a new stacking context so the purple glow
|
||||||
|
// box-shadow stays z-trapped inside the hero band — without
|
||||||
|
// it the shadow bled through the sticky section nav below
|
||||||
|
// (the nav uses bg-background/80 + backdrop-blur, which the
|
||||||
|
// shadow leaked through).
|
||||||
|
"relative isolate overflow-hidden rounded-xl px-4 py-5 sm:px-6 sm:py-6",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{/*
|
{/*
|
||||||
|
|||||||
Reference in new issue
Block a user