fix(web): remove black seam at the topbar scroll fade boundary

[Luca-Lucidera]

Problem

In the desktop app, a message scrolling under the topbar gets cut by a 1px black line that runs across the text.

The timeline scroller masks its top edge with three mask layers: the fade gradient, a solid black rectangle covering the rest of the viewport, and the opaque scrollbar lane. The gradient and the solid layer met at exactly --topbar-scroll-fade-height. Mask composition unions the layer alphas, so under fractional display scaling that shared edge can land on a half pixel where the gradient has already ended and the solid layer has not yet begun. Both contribute zero alpha, the row of content turns transparent, and the dark window background shows through.

Fix

Extend the gradient layer by 1px so it overlaps the solid layer. The extra pixel sits past the gradient's black 100% stop, so it stays fully opaque: the seam is covered by both layers and the fade itself looks unchanged. The other consumers of topbar-scroll-fade (pull requests view, settings layout, both at --topbar-scroll-fade-height: 1.5rem) are unaffected — the solid layer still starts at 1.5rem and the extra pixel is black on black.

Before / after

Before

After

Verification

• vp fmt --check apps/web/src/index.css
• vp test run src/components/chat/MessagesTimeline.test.tsx — 26/26

Out of scope: virtualized-scroll-fade has the same seam risk on the horizontal axis. Separate PR.

Model: Claude Opus 5 (1M). Harness: T3 Code.

---

Note

Low Risk
One-pixel CSS mask overlap in a visual utility; no logic, auth, or data-path changes.

Overview
Fixes a 1px black line where timeline content scrolls under the topbar.

topbar-scroll-fade now sizes the fade mask 1px taller so it overlaps the solid viewport mask. That covers a subpixel gap under fractional display scaling without changing the visible fade.

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

Note

Fix black seam at topbar scroll fade boundary in index.css

Updates mask-size and -webkit-mask-size for the topbar scroll fade to use calc(var(--topbar-scroll-fade-height) + 1px) instead of the raw variable. This makes the masked fade region 1px taller and eliminates a visible seam at the boundary.

^{Macroscope summarized b4cb1d1.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 30842d6b-f5d7-4755-8cfc-dd9666cba235

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved at b4cb1d1

Macroscope's review found this PR approvable — This is a minimal CSS-only fix that adjusts mask-size calculations by 1px to eliminate a visual artifact (black seam at scroll fade boundary). No runtime behavior changes beyond the visual fix.

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