fix(web): stop composer banner glass overlap

apps/web/src/components/chat/ComposerBannerStack.test.tsx

@@ -53,7 +53,6 @@ describe("ComposerBannerStack", () => {
     expect(markup).not.toContain("data-composer-banner-stack-expanded-items");
     expect(markup).toContain("chat-composer-drawer-surface");
     expect(markup).toContain("chat-composer-drawer-attached");
-    expect(markup).toContain("before:mask-none");
     expect(markup).toContain("text-xs");
     expect(markup).toContain('data-composer-banner-drawer="true"');
     expect(markup).toContain('data-variant="warning"');

apps/web/src/components/chat/ComposerBannerStack.tsx

@@ -199,7 +199,7 @@ function ComposerBannerStackAlert({
       variant={item.variant}
       className={cn(
         attached
-          ? "chat-composer-drawer-surface chat-composer-drawer-attached px-3 pt-2 pb-[calc(var(--chat-composer-attachment-overlap)_+_0.375rem)] text-xs before:mask-none sm:px-4"
+          ? "chat-composer-drawer-surface chat-composer-drawer-attached px-3 pt-2 pb-[calc(var(--chat-composer-attachment-overlap)_+_0.375rem)] text-xs sm:px-4"
           : "alert-glass rounded-[22px]",
         item.className,
       )}

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -29,6 +29,7 @@ import {
   type KeyboardEvent,
   type MouseEvent,
   type ReactNode,
+  type CSSProperties,
 } from "react";
 import { LegendList, type LegendListRef } from "@legendapp/list/react";
 import { FileDiff } from "@pierre/diffs/react";
@@ -450,6 +451,12 @@ export const MessagesTimeline = memo(function MessagesTimeline({
     );
     return config ? { ...config, onReady: handleAnchorReady } : undefined;
   }, [anchorMessageId, handleAnchorReady, rows]);
+  const timelineViewportStyle =
+    contentInsetEndAdjustment === 0
+      ? undefined
+      : ({
+          "--timeline-composer-overlay-height": `min(${contentInsetEndAdjustment}px, 60%)`,
+        } as CSSProperties);
 
   const handleScroll = useCallback(() => {
     const state = listRef.current?.getState?.();
@@ -581,7 +588,11 @@ export const MessagesTimeline = memo(function MessagesTimeline({
   return (
     <TimelineRowCtx value={sharedState}>
       <TimelineRowActivityCtx value={activityState}>
-        <div ref={setTimelineViewportElement} className="relative h-full min-h-0">
+        <div
+          ref={setTimelineViewportElement}
+          className="relative h-full min-h-0"
+          style={timelineViewportStyle}
+        >
           <LegendList<MessagesTimelineRow>
             ref={listRef}
             data={rows}
@@ -601,7 +612,10 @@ export const MessagesTimeline = memo(function MessagesTimeline({
             onScroll={handleScroll}
             className={cn(
               "scrollbar-gutter-both h-full min-h-0 overflow-x-hidden overscroll-y-contain px-3 [overflow-anchor:none] sm:px-5",
-              topFadeEnabled && "topbar-scroll-fade",
+              contentInsetEndAdjustment > 0 && "virtualized-scroll-fade",
+              contentInsetEndAdjustment > 0 &&
+                (topFadeEnabled ? "timeline-scroll-combined-fade" : "timeline-scroll-bottom-fade"),
+              contentInsetEndAdjustment === 0 && topFadeEnabled && "topbar-scroll-fade",
             )}
             ListHeaderComponent={
               loadEarlier !== null ? (

apps/web/src/index.css

@@ -415,6 +415,48 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     var(--app-scrollbar-width) 100%;
 }
 
+@utility timeline-scroll-bottom-fade {
+  --virtualized-scroll-fade-mask: linear-gradient(
+    to bottom,
+    black 0,
+    black calc(100% - var(--timeline-composer-overlay-height) - 1.5rem),
+    transparent calc(100% - var(--timeline-composer-overlay-height)),
+    transparent 100%
+  );
+}
+
+@utility timeline-scroll-combined-fade {
+  --virtualized-scroll-fade-mask: linear-gradient(
+    to bottom,
+    transparent 0,
+    rgb(0 0 0 / 10%) 0.25rem,
+    rgb(0 0 0 / 30%) 0.6rem,
+    rgb(0 0 0 / 58%) 1.05rem,
+    rgb(0 0 0 / 82%) 1.55rem,
+    rgb(0 0 0 / 96%) 2.05rem,
+    black 2.5rem,
+    black calc(100% - var(--timeline-composer-overlay-height) - 1.5rem),
+    transparent calc(100% - var(--timeline-composer-overlay-height)),
+    transparent 100%
+  );
+
+  @variant sm {
+    --virtualized-scroll-fade-mask: linear-gradient(
+      to bottom,
+      transparent 0,
+      rgb(0 0 0 / 10%) 0.3rem,
+      rgb(0 0 0 / 30%) 0.72rem,
+      rgb(0 0 0 / 58%) 1.26rem,
+      rgb(0 0 0 / 82%) 1.86rem,
+      rgb(0 0 0 / 96%) 2.46rem,
+      black 3rem,
+      black calc(100% - var(--timeline-composer-overlay-height) - 1.5rem),
+      transparent calc(100% - var(--timeline-composer-overlay-height)),
+      transparent 100%
+    );
+  }
+}
+
 /* Stage-channel art needs a mask and pseudo-element gradient, so keep the
    behavior composable without tying it to the global components layer. */
 @utility sidebar-stage-backdrop {