From 3662afd81d42d6ea711649f662648c67b064ea3f Mon Sep 17 00:00:00 2001 From: heaven Date: Tue, 2 Jun 2026 22:04:50 +0300 Subject: [PATCH] fix(ai-chat): cast the history panel shadow only when open so it stops bleeding a dark sliver onto the right edge while closed --- src/app/features/bots/BotConversations.css.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/app/features/bots/BotConversations.css.ts b/src/app/features/bots/BotConversations.css.ts index 18a2a1db..b0cea505 100644 --- a/src/app/features/bots/BotConversations.css.ts +++ b/src/app/features/bots/BotConversations.css.ts @@ -69,11 +69,17 @@ export const History = style({ flexDirection: 'column', backgroundColor: color.Surface.Container, borderLeft: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`, - boxShadow: '-12px 0 40px rgba(0, 0, 0, 0.32)', transform: 'translateX(100%)', transition: 'transform 220ms cubic-bezier(0.22, 1, 0.36, 1)', selectors: { - '&[data-open]': { transform: 'translateX(0)' }, + // Shadow ONLY when open. The base `translateX(100%)` parks the panel off the right edge, but its + // cast shadow (offset -12px, i.e. leftward, + 40px blur) reaches back INTO the body and Body's + // `overflow: hidden` can't clip it (the leak lands inside the box, not past its edge) — so a base + // shadow paints a dark sliver on the right edge even while the drawer is closed. + '&[data-open]': { + transform: 'translateX(0)', + boxShadow: '-12px 0 40px rgba(0, 0, 0, 0.32)', + }, }, '@media': { '(prefers-reduced-motion: reduce)': { transition: 'none' },