From 7a8c97eda1b31f809d693c3e55d15bb5f816f7bc Mon Sep 17 00:00:00 2001 From: Vitalii Yehorov Date: Fri, 28 Aug 2026 16:48:31 +0200 Subject: [PATCH] fix(web): seal the seam between attached banners and the composer A row about one device pixel tall at the join between an attached banner and the composer was painted by neither surface, so the chat behind it showed through crisp and unblurred. The row is the drawer's own last masked row. Chromium drops the final device-pixel row of a filtered backdrop when the mask cut-off lands off the pixel grid, and the composer's surface begins exactly at that cut-off, so nothing covers it. Bleeding the cut-off one pixel past the seam lets the drawer paint that row itself. Co-Authored-By: Claude Fable 5 --- apps/web/src/index.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/apps/web/src/index.css b/apps/web/src/index.css index d43475f901cc..7e1763b6cfdd 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -896,15 +896,19 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil color-mix(in srgb, var(--chat-composer-attached-surface) var(--glass-opacity), transparent); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); + /* The cut-off bleeds one pixel past the seam. Chromium drops the last + device-pixel row of a filtered backdrop when the cut-off lands off the + pixel grid, and the composer's surface starts exactly there, so without + the bleed that row is painted by neither and the chat shows through. */ -webkit-mask-image: linear-gradient( to top, - transparent 0 var(--chat-composer-attachment-overlap), - black var(--chat-composer-attachment-overlap) + transparent 0 calc(var(--chat-composer-attachment-overlap) - 1px), + black calc(var(--chat-composer-attachment-overlap) - 1px) ); mask-image: linear-gradient( to top, - transparent 0 var(--chat-composer-attachment-overlap), - black var(--chat-composer-attachment-overlap) + transparent 0 calc(var(--chat-composer-attachment-overlap) - 1px), + black calc(var(--chat-composer-attachment-overlap) - 1px) ); box-shadow: 0 12px 28px -18px rgb(0 0 0 / 40%); content: "";