fix: make scroll-fade seamless via content mask, not a colour overlay

The page backdrop is a theme gradient with background-attachment: fixed,
so no single overlay colour (--background or --shell-gradient-base) could
match it — hence the persistent darker band. Replace the colour overlay
with a mask-image on the content that fades its top edge to transparent
when scrolled, revealing the real backdrop underneath. Seamless on every
theme by construction; applied only when scrolled so content isn't faded
at rest.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: interacsean

packages/core/src/components/sidebar/sidebar-layout.tsx

@@ -112,35 +112,24 @@ export const SidebarLayout = (props: SidebarLayoutProps) => {
               margin / padding pair mirrors SidebarInset's own responsive
               padding (px-4, → px-8 at md when the sidebar is the inset
               variant). */}
+          {/* Scroll-fade: once scrolled, a mask fades the top edge of the
+              content to transparent so it dissolves into the pinned breadcrumb
+              rather than cutting off. Masking (rather than overlaying a matching
+              colour) reveals the real page backdrop — which is a theme gradient
+              with `background-attachment: fixed`, so no single colour could
+              match it — making the fade seamless on every theme. Only applied
+              when scrolled, so content isn't faded at rest. */}
           <div
             ref={scrollRef}
             onScroll={handleScroll}
             data-scrolled={scrolled ? "" : undefined}
             className={cn(
-              "astw:group/scroll astw:flex astw:flex-col astw:gap-4 astw:flex-1 astw:min-h-0 astw:overflow-y-auto",
+              "astw:flex astw:flex-col astw:gap-4 astw:flex-1 astw:min-h-0 astw:overflow-y-auto",
               "astw:-mr-4 astw:pr-4",
               "astw:md:group-has-data-[variant=inset]/sidebar-wrapper:-mr-8 astw:md:group-has-data-[variant=inset]/sidebar-wrapper:pr-8",
+              "astw:data-[scrolled]:[mask-image:linear-gradient(to_bottom,transparent,black_2rem)]",
             )}
           >
-            {/* Scroll-fade: a sticky strip that rides the top of the scroll
-                viewport so content dissolves into the pinned breadcrumb rather
-                than cutting off. It's a seamless gradient from the page
-                backdrop colour (--shell-gradient-base, which themes with a
-                gradient page background anchor to; falls back to --background)
-                at full opacity to the SAME colour at zero alpha — using
-                relative-colour syntax rather than `transparent` (which is
-                black·0 and would band to grey on light themes). h-8 with -mb-12
-                cancels its own height plus the flex gap so it adds no layout
-                space; it fades in once scrolled and is inert to pointer
-                events. */}
-            <div
-              aria-hidden
-              style={{
-                backgroundImage:
-                  "linear-gradient(to bottom, var(--shell-gradient-base, var(--background)), rgb(from var(--shell-gradient-base, var(--background)) r g b / 0))",
-              }}
-              className="astw:pointer-events-none astw:sticky astw:top-0 astw:z-10 astw:-mb-12 astw:h-8 astw:shrink-0 astw:opacity-0 astw:transition-opacity astw:duration-200 astw:group-data-[scrolled]/scroll:opacity-100"
-            />
             {Children ?? <AppShellOutlet />}
           </div>
         </SidebarInset>