authorgravatar for 28518115+Williawar@users.noreply.github.comWilliawar <28518115+Williawar@users.noreply.github.com> 2026-08-15 22:02:41+10:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-15 12:02:41+00:00
logd79f975d0b39805c443e97accfcd4aa60786f13f
treee8c1093af15a4dded06ae521934e8684a362dfa8
parentb0de3857775b7d1407372cde031326e15a9d4119
signature Signed by PGP key B5690EEEBB952194

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

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

1 files changed, 17 insertions(+), 13 deletions(-)

apps/web/src/index.css+17-13
...@@ -716,27 +716,31 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil...@@ -716,27 +716,31 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
716 .chat-composer-glass-shell-with-context::before {716 .chat-composer-glass-shell-with-context::before {
717 border-radius: 0;717 border-radius: 0;
718 /*718 /*
719 * One continuous glass layer: a 22px composer joined to a 16px strip,719 * One continuous glass layer: a 22px composer joined to a 16px strip. The
720 * whose visible sides align with the composer's bottom tangents.720 * strip is inset 1.375rem per side, so the step-in positions and their
721 * curve controls stay in rem to keep tracking it at non-default interface
722 * font sizes; the composer's 22px top radius and the strip's 16px bottom
723 * radius are px by design.
721 */724 */
722 clip-path: shape(725 clip-path: shape(
723 from 0 22px,726 from 0 22px,
724 curve to 22px 0 with 0 9.85px / 9.85px 0,727 curve to 22px 0 with 0 9.85px / 9.85px 0,
725 line to calc(100% - 22px) 0,728 line to calc(100% - 22px) 0,
726 curve to 100% 22px with calc(100% - 9.85px) 0 / 100% 9.85px,729 curve to 100% 22px with calc(100% - 9.85px) 0 / 100% 9.85px,
727 line to 100% calc(100% - var(--chat-composer-context-extension) - 22px),730 line to 100% calc(100% - var(--chat-composer-context-extension) - 1.375rem),
728 curve to calc(100% - 22px) calc(100% - var(--chat-composer-context-extension)) with 100%731 curve to calc(100% - 1.375rem) calc(100% - var(--chat-composer-context-extension)) with 100%
729 calc(100% - var(--chat-composer-context-extension) - 9.85px) / calc(100% - 9.85px)732 calc(100% - var(--chat-composer-context-extension) - 0.6156rem) / calc(100% - 0.6156rem)
730 calc(100% - var(--chat-composer-context-extension)),733 calc(100% - var(--chat-composer-context-extension)),
731 line to calc(100% - 22px) calc(100% - 16px),734 line to calc(100% - 1.375rem) calc(100% - 16px),
732 curve to calc(100% - 38px) 100% with calc(100% - 22px) calc(100% - 7.16px) /735 curve to calc(100% - 1.375rem - 16px) 100% with calc(100% - 1.375rem) calc(100% - 7.16px) /
733 calc(100% - 29.16px) 100%,736 calc(100% - 1.375rem - 7.16px) 100%,
734 line to 38px 100%,737 line to calc(1.375rem + 16px) 100%,
735 curve to 22px calc(100% - 16px) with 29.16px 100% / 22px calc(100% - 7.16px),738 curve to 1.375rem calc(100% - 16px) with calc(1.375rem + 7.16px) 100% / 1.375rem
736 line to 22px calc(100% - var(--chat-composer-context-extension)),739 calc(100% - 7.16px),
737 curve to 0 calc(100% - var(--chat-composer-context-extension) - 22px) with 9.85px740 line to 1.375rem calc(100% - var(--chat-composer-context-extension)),
741 curve to 0 calc(100% - var(--chat-composer-context-extension) - 1.375rem) with 0.6156rem
738 calc(100% - var(--chat-composer-context-extension)) / 0742 calc(100% - var(--chat-composer-context-extension)) / 0
739 calc(100% - var(--chat-composer-context-extension) - 9.85px),743 calc(100% - var(--chat-composer-context-extension) - 0.6156rem),
740 line to 0 22px,744 line to 0 22px,
741 close745 close
742 );746 );