fix(web): recess the chat panel with a soft darkening overlay

Sharing the gradient made the graph and chat equally bright, so they
blended with no separation. Match prod: add a gentle left→right
darkening over the chat column so it reads as a distinct, recessed
panel while the shared dots and glow still show through. The hairline
divider stays for definition.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sreeram Sreedhar 2026-06-06 21:23:40 -07:00
parent 27df084526
commit 78d9494ed2

View file

@ -1625,9 +1625,14 @@ export function ChatSidebar({
line keeps the boundary legible without breaking the shared gradient. */}
<div className="pointer-events-none relative z-[2] w-px shrink-0 self-stretch bg-gradient-to-b from-transparent via-white/15 to-transparent" />
<div className="relative z-[2] flex h-full min-h-0 w-full min-w-0 max-w-[min(720px,100%)] shrink-0 basis-[min(720px,50vw)] flex-col">
{pageDesktopToolbarRow}
<div className="relative mx-auto flex h-full min-h-0 w-full min-w-0 max-w-[min(720px,100%)] flex-1 flex-col px-3 sm:px-4 md:px-0">
{shell}
{/* Soft leftright darkening so the chat reads as a distinct,
recessed panel (like prod) while the dots/glow still show through. */}
<div className="pointer-events-none absolute inset-0 z-0 bg-gradient-to-r from-transparent via-[#05080D]/40 to-[#05080D]/80" />
<div className="relative z-[1] flex h-full min-h-0 w-full flex-col">
{pageDesktopToolbarRow}
<div className="relative mx-auto flex h-full min-h-0 w-full min-w-0 max-w-[min(720px,100%)] flex-1 flex-col px-3 sm:px-4 md:px-0">
{shell}
</div>
</div>
</div>
</div>