fix(web): stop composer banner glass overlap

[t3-code]

summary

• restore the shared 17px attachment mask so banner fill never stacks under the translucent composer
• fade virtualized timeline content to fully transparent before the measured composer overlay begins, keeping conversation text out from behind attached banners and the composer
• preserve the shared eased topbar profile in the combined list mask, keep the scrollbar lane opaque, leave minimap chrome outside the mask, and clamp the bottom fade to at most 60% of timeline height
• preserve the user's Glass opacity setting across the banner, stack cap, drawers, and composer
• remove the stale before:mask-none assertion from fix(web): keep server update banners flush with the composer #8000

this keeps #8000's intended content occlusion without its overlap regression or a hardcoded opaque banner.

verification

• vp test run --project unit src/components/chat/ComposerBannerStack.test.tsx src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• vp fmt --check apps/web/src/components/chat/ComposerBannerStack.tsx apps/web/src/components/chat/ComposerBannerStack.test.tsx apps/web/src/components/chat/MessagesTimeline.tsx
• web typecheck
• real web renderer at 1351x522, T3 Chat dark theme at 40% glass opacity
• masked glass without timeline fade: synthetic background text changed 22,090 visible banner pixels
• unmasked glass: banner/text affected 7,578 overlap pixels and 11,883 composer pixels
• final timeline fade: background text changed 0 pixels while banner opacity remained 40%; both standard and WebKit banner masks remained the shared 17px attachment mask
• verified the combined list mask reproduces the original responsive 48px top profile at 4.8/11.52/20.16/29.76/39.36/48px, retains the virtualized fade's separate opaque scrollbar layer, and leaves the parent viewport unmasked
• verified a simulated stale 9,999px overlay measurement resolves through min(9999px, 60%) instead of hiding the full timeline

visual proof uses the real app and production composer/banner/timeline components with a synthetic in-flight update item and synthetic background conversation text.

original text show-through

overlap regression

after

request provenance

• requested by: @extoci

---

Note

Low Risk
Visual CSS/masking only in the chat timeline and composer banners; no auth, data, or API changes. Overlay-height clamp reduces the chance of a bad measurement hiding the whole list.

Overview
Stops conversation text from showing through glass composer banners while restoring the shared attachment mask so banner fill no longer stacks under the translucent composer.

When the composer overlay is present, the virtualized timeline now fades to fully transparent before the measured overlay (clamped to 60% of viewport height). Combined top+bottom masks keep the existing eased topbar profile and an opaque scrollbar lane; the minimap stays outside the mask. Attached banners drop before:mask-none so they use the shared 17px seam again.

^{Reviewed by Cursor Bugbot for commit 8462523. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix composer banner glass overlap with adaptive scroll-fade masks

• Removes the before:mask-none class from ComposerBannerStackAlert so attached banners no longer disable the mask gradient, causing the glass overlap.
• Adds timeline-scroll-bottom-fade and timeline-scroll-combined-fade CSS utilities in index.css that reserve bottom space via the --timeline-composer-overlay-height variable (capped at 60%).
• Updates MessagesTimeline.tsx to set the overlay-height CSS variable and apply the appropriate fade class based on contentInsetEndAdjustment and topFadeEnabled.
• Behavioral Change: when contentInsetEndAdjustment > 0, the timeline switches from topbar-scroll-fade to the new combined/bottom fade classes; review the gradient stops and sm variant in index.css for correct rendering across viewport sizes.

^{Macroscope summarized 8462523.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	13.4 KiB	13.4 KiB	+14 B (+0.1%)	15.1 KiB	✅
Codex	Thread snapshot wire	6.9 KiB	6.9 KiB	+3 B (+0.0%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.5 KiB	6.6 KiB	+11 B (+0.2%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	55.0 KiB	55.0 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	16	16	0 (0.0%)	21	✅
Claude	Total thread wire	13.4 KiB	13.5 KiB	+8 B (+0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	6.9 KiB	6.9 KiB	−1 B (−0.0%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.6 KiB	6.6 KiB	+9 B (+0.1%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	55.8 KiB	55.8 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	16	16	0 (0.0%)	21	✅

Baseline: b4be33f · PR result: 8462523 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 109.4 KiB
• Claude decoded thread snapshot: 110.1 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Approved at 8462523

Macroscope's review found this PR approvable — This is a localized visual bug fix that restores the composer attachment mask and adds adaptive timeline fades beneath the existing composer overlay. It changes only chat rendering and masking, with no data, API, security, billing, or deployment impact.

^{You can add or adjust custom eligibility rules. Learn more.}

Dismissing prior approval to re-evaluate 3298ebb

[macroscopeapp]

One finding on the new glass override in apps/web/src/index.css. Restoring the mask (dropping before:mask-none) looks right; pinning --glass-opacity to 100% for this one surface is the part that introduces a consistency regression.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Two findings on the new timeline mask. The shared virtualized-scroll-fade contract is the right owner here, but the mask geometry it is handed is unclamped and drops the shared top-fade profile.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the composer/timeline fade changes for consistency with the shared scroll-fade contract. One finding on the new timeline bottom mask.

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 87166b0. Configure here.}