Skip to content

fix(web): keep the composer glass aligned with the context strip at any interface font size #5703

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

Merged
juliusmarminge merged 1 commit into from
Aug 15, 2026
+17 −13
Merged

fix(web): keep the composer glass aligned with the context strip at any interface font size #5703

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
30 changes: 17 additions & 13 deletions apps/web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -458,27 +458,31 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
.chat-composer-glass-shell-with-context::before {
border-radius: 0;
/*
* One continuous glass layer: a 22px composer joined to a 16px strip,
* whose visible sides align with the composer's bottom tangents.
* One continuous glass layer: a 22px composer joined to a 16px strip. The
* strip is inset 1.375rem per side, so the step-in positions and their
* curve controls stay in rem to keep tracking it at non-default interface
* font sizes; the composer's 22px top radius and the strip's 16px bottom
* radius are px by design.
*/
clip-path: shape(
from 0 22px,
curve to 22px 0 with 0 9.85px / 9.85px 0,
line to calc(100% - 22px) 0,
curve to 100% 22px with calc(100% - 9.85px) 0 / 100% 9.85px,
line to 100% calc(100% - var(--chat-composer-context-extension) - 22px),
curve to calc(100% - 22px) calc(100% - var(--chat-composer-context-extension)) with 100%
calc(100% - var(--chat-composer-context-extension) - 9.85px) / calc(100% - 9.85px)
line to 100% calc(100% - var(--chat-composer-context-extension) - 1.375rem),
curve to calc(100% - 1.375rem) calc(100% - var(--chat-composer-context-extension)) with 100%
calc(100% - var(--chat-composer-context-extension) - 0.6156rem) / calc(100% - 0.6156rem)
calc(100% - var(--chat-composer-context-extension)),
line to calc(100% - 22px) calc(100% - 16px),
curve to calc(100% - 38px) 100% with calc(100% - 22px) calc(100% - 7.16px) /
calc(100% - 29.16px) 100%,
line to 38px 100%,
curve to 22px calc(100% - 16px) with 29.16px 100% / 22px calc(100% - 7.16px),
line to 22px calc(100% - var(--chat-composer-context-extension)),
curve to 0 calc(100% - var(--chat-composer-context-extension) - 22px) with 9.85px
line to calc(100% - 1.375rem) calc(100% - 16px),
curve to calc(100% - 1.375rem - 16px) 100% with calc(100% - 1.375rem) calc(100% - 7.16px) /
calc(100% - 1.375rem - 7.16px) 100%,
line to calc(1.375rem + 16px) 100%,
curve to 1.375rem calc(100% - 16px) with calc(1.375rem + 7.16px) 100% / 1.375rem
calc(100% - 7.16px),
line to 1.375rem calc(100% - var(--chat-composer-context-extension)),
curve to 0 calc(100% - var(--chat-composer-context-extension) - 1.375rem) with 0.6156rem
calc(100% - var(--chat-composer-context-extension)) / 0
calc(100% - var(--chat-composer-context-extension) - 9.85px),
calc(100% - var(--chat-composer-context-extension) - 0.6156rem),
line to 0 22px,
close
);
Expand Down
Loading