fix(web): keep server update banners flush with the composer

[t3dotgg]

Conversation text showed through between the server update banner and the composer.

Attached composer banners now keep their background visible across the full composer overlap.

Verified with a real server update banner and a synthetic conversation. The previous 17px transparent mask now computes to none.

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

Made by GPT-5.6 Sol with Codex.

---

Note

Low Risk
Tiny CSS class tweak on composer banner styling with a matching unit test; no logic or security changes.

Overview
Stops conversation text from showing through the gap where attached composer banners overlap the composer.

Attached banners now apply before:mask-none so the drawer surface stays opaque across the overlap instead of using the previous transparent mask. The single-banner stack test asserts the class is present.

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

Note

Add before:mask-none to ComposerBannerStackAlert for flush banners

Adds the before:mask-none CSS utility class to ComposerBannerStackAlert when rendering in the attached state. This removes the mask on the before pseudo-element so the banner sits flush with the composer. Updates tests to assert the class is present.

^{Macroscope summarized ceeec6b.}

[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: 68f37833-9be9-4608-8721-561906020183

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

[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	+4 B (+0.0%)	15.1 KiB	✅
Codex	Thread snapshot wire	6.9 KiB	6.9 KiB	−7 B (−0.1%)	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.4 KiB	−8 B (−0.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	6.9 KiB	6.9 KiB	−6 B (−0.1%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.6 KiB	6.5 KiB	−2 B (−0.0%)	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: b1670ac · PR result: ceeec6b · 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]

One finding: the new before:mask-none cancels the shared composer drawer attachment-seam mask at this call site, which reintroduces the surface/border overlap over the composer instead of removing it. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

before:mask-none disables the attachment-seam mask that the shared drawer surface owns, which looks like it will worsen the overlap rather than fix it.

:is(.chat-composer-drawer-surface, .chat-composer-top-drawer)::before (index.css:887) draws the banner's glass fill, 1px outline (border-radius: 16px 16px 0 0, so a square bottom edge) and shadow, then masks away the bottom --chat-composer-attachment-overlap (calc(1rem + 1px)). That masked strip is exactly the region the composer is pulled into by .chat-composer-drawer-slot { margin-bottom: calc(-1 * var(--chat-composer-attachment-overlap)) }, and the call site still reserves it via pb-[calc(var(--chat-composer-attachment-overlap)_+_0.375rem)]. With the mask off, the pseudo-element paints in that strip again: a translucent glass fill plus backdrop-filter stacked underneath the composer's own translucent shell (a darker band across the composer's top ~17px), the pseudo-element's bottom border as a stray 1px line, and its square bottom corners peeking outside the composer's 22px top radius. The Tailwind utility also only overrides mask-image; the rule sets -webkit-mask-image too, which this file's surrounding CSS consistently treats as a separate declaration, so the emitted result can differ between engines.

It also applies to every attached front banner, not only the server-update one. If there is a real gap/overlap for that banner, please fix it in the shared drawer contract (overlap variable or the .chat-composer-drawer-slot + .chat-composer-drawer-slot::before seam rule) so all attached drawers — ThreadSyncStatusPill, ComposerCommandMenu, ComposerStashMenu — stay consistent, and drop the matching assertion at ComposerBannerStack.test.tsx:56.

Suggested change

	? "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"

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Skipped

Macroscope did not run approvability analysis for this PR. Macroscope could not determine whether this PR modifies its approvability configuration, so the PR was not approved automatically. A PR that may change the rules that govern approval is never approved automatically.