From 98cbb00c8f5c264dad7ffa9c9a009239bb13c35d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sun, 7 Jun 2026 22:04:32 +0200 Subject: [PATCH] fix(insights): stop clipping the wellness ring glow on the detail card MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The wellness detail card carried overflow:hidden (v1.15.12) to keep the subtle bottom-leaning gradient inside the rounded corners. But the score ring's drop-shadow bloom is a child of that card, so overflow:hidden also clipped the glow at the card edge. The gradient is the card's own background, which is already clipped to border-radius without overflow:hidden — overflow only clips child boxes, never a painted background. Drop overflow:hidden: the gradient stays corner-clipped, the ring glow now renders uncut on all four sides. --- src/app/globals.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/app/globals.css b/src/app/globals.css index 784f52bb8..eeb1e1ebf 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -533,7 +533,12 @@ .wellness-detail-card { --tile-hue: var(--dracula-purple); position: relative; - overflow: hidden; + /* The bottom-leaning gradient below is the card's OWN `background`, which is + * already clipped to `border-radius` — a painted background never bleeds past + * the rounded corners regardless of `overflow`. We deliberately do NOT set + * `overflow: hidden`: the ring's drop-shadow bloom (`.wellness-ring-arc`) is a + * CHILD box, and `overflow: hidden` would clip that glow at the card edge. The + * gradient stays corner-clipped; the glow renders uncut on all four sides. */ background: linear-gradient( 180deg, color-mix(in srgb, var(--tile-hue) 16%, var(--card)) 0%,