Skip to content

fix(web): stop composer banner glass overlap - #8034

Open
t3-code[bot] wants to merge 7 commits into
mainfrom
fix/composer-banner-glass-overlap
Open

fix(web): stop composer banner glass overlap#8034
t3-code[bot] wants to merge 7 commits into
mainfrom
fix/composer-banner-glass-overlap

Conversation

@t3-code

@t3-code t3-code Bot commented Aug 23, 2026

Copy link
Copy Markdown
Contributor

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

conversation text showing through the update banner

overlap regression

update banner painting through the composer overlap

after

glass update banner with timeline content masked below it and a clean composer seam

request provenance


Note

Low Risk
Visual masking and CSS class selection only; no changes to message data, auth, or composer logic beyond scroll-fade presentation.

Overview
Fixes conversation text showing through translucent composer banners by masking the virtualized timeline where the measured composer stack sits, instead of relying only on the topbar fade.

MessagesTimeline now sets --timeline-composer-overlay-height on the viewport from contentInsetEndAdjustment, clamped with min(..., 60%) so bad measurements cannot wipe the whole list. When that inset is positive, the LegendList uses virtualized-scroll-fade plus either timeline-scroll-bottom-fade or timeline-scroll-combined-fade (when topFadeEnabled), and keeps topbar-scroll-fade only when there is no composer overlay.

index.css adds those timeline utilities: they define --virtualized-scroll-fade-mask with a bottom gradient that fades to transparent at the overlay height (and the combined variant preserves the existing eased top profile, including the sm breakpoint).

Reviewed by Cursor Bugbot for commit 9cb5e8d. Bugbot is set up for automated code reviews on this repo. Configure here.

Note

Fix composer banner overlap in MessagesTimeline scroll fades

  • Sets the --timeline-composer-overlay-height CSS variable on the timeline viewport when contentInsetEndAdjustment is non-zero.
  • Adds timeline-scroll-bottom-fade and timeline-scroll-combined-fade utility classes to apply gradient masks that respect the composer height.
  • Switches LegendList to use the new fade classes when a bottom inset exists, preserving topbar-scroll-fade only when the inset is zero.
  • Behavioral Change: Scroll fade masks switch from top-only to bottom or combined fades when the composer is visible.

Macroscope summarized 9cb5e8d.

Co-authored-by: Exotic <118054752+extoci@users.noreply.github.com>
@github-actions github-actions Bot added vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. size:XS 0-9 changed lines (additions + deletions). labels Aug 23, 2026
@github-actions

github-actions Bot commented Aug 23, 2026

Copy link
Copy Markdown
Contributor

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 −16 B (−0.1%) 15.1 KiB
Codex Thread snapshot wire 6.9 KiB 6.9 KiB +5 B (+0.1%) 7.3 KiB
Codex Live turn WebSocket wire 6.6 KiB 6.5 KiB −21 B (−0.3%) 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.5 KiB 13.4 KiB −7 B (−0.1%) 15.1 KiB
Claude Thread snapshot wire 6.9 KiB 6.9 KiB +2 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: 883e1a3 · PR result: 9cb5e8d · 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[bot]
macroscopeapp Bot previously approved these changes Aug 23, 2026
@macroscopeapp

macroscopeapp Bot commented Aug 23, 2026

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Approved at 9cb5e8d

Macroscope's review found this PR approvable — This narrowly scoped web UI fix adjusts the timeline’s existing scroll masks so translucent composer banners do not overlap conversation content. Its impact is limited to presentation styling, with the scrollbar and minimap kept outside the content mask and no changes to data or application workflows.

Notes:

  • No code objects were reviewed. Approvability was decided on eligibility alone.

You can add or adjust custom eligibility rules. Learn more.

Co-authored-by: Exotic <118054752+extoci@users.noreply.github.com>
@macroscopeapp
macroscopeapp Bot dismissed their stale review August 23, 2026 23:12

Dismissing prior approval to re-evaluate 3298ebb

@macroscopeapp macroscopeapp Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread apps/web/src/index.css Outdated
t3-code Bot and others added 2 commits August 23, 2026 23:26
Co-authored-by: Exotic <118054752+extoci@users.noreply.github.com>
@github-actions github-actions Bot added size:S 10-29 changed lines (additions + deletions). and removed size:XS 0-9 changed lines (additions + deletions). labels Aug 23, 2026

@macroscopeapp macroscopeapp Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread apps/web/src/components/chat/MessagesTimeline.tsx Outdated
Comment thread apps/web/src/components/chat/MessagesTimeline.tsx Outdated
Co-authored-by: Exotic <118054752+extoci@users.noreply.github.com>

@macroscopeapp macroscopeapp Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Fix All in Cursor

❌ 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.

Comment thread apps/web/src/components/chat/MessagesTimeline.tsx Outdated
Co-authored-by: Exotic <118054752+extoci@users.noreply.github.com>
@github-actions github-actions Bot added size:M 30-99 changed lines (additions + deletions). and removed size:S 10-29 changed lines (additions + deletions). labels Aug 23, 2026
macroscopeapp[bot]
macroscopeapp Bot previously approved these changes Aug 23, 2026
@macroscopeapp
macroscopeapp Bot dismissed their stale review August 24, 2026 21:33

Dismissing prior approval to re-evaluate 9cb5e8d

@GuilhermeVieiraDev

Copy link
Copy Markdown
Contributor

Fixed on #8083 by Theo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:M 30-99 changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants