Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
t3dotgg wants to merge 1 commit into
base: main
Choose a base branch
from
+2 −1
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/web/src/components/chat/ComposerBannerStack.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ 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"');
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/chat/ComposerBannerStack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 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 before:mask-none sm:px-4"

@macroscopeapp macroscopeapp Bot Aug 23, 2026

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.

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

: "alert-glass rounded-[22px]",
item.className,
)}
Expand Down
Loading