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
716716 .chat-composer-glass-shell-with-context::before {
717717 border-radius: 0;
718718 /*
719 * One continuous glass layer: a 22px composer joined to a 16px strip,
720 * whose visible sides align with the composer's bottom tangents.
719 * One continuous glass layer: a 22px composer joined to a 16px strip. The
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.
721724 */
722725 clip-path: shape(
723726 from 0 22px,
724727 curve to 22px 0 with 0 9.85px / 9.85px 0,
725728 line to calc(100% - 22px) 0,
726729 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),
728 curve to calc(100% - 22px) calc(100% - var(--chat-composer-context-extension)) with 100%
729 calc(100% - var(--chat-composer-context-extension) - 9.85px) / calc(100% - 9.85px)
730 line to 100% calc(100% - var(--chat-composer-context-extension) - 1.375rem),
731 curve to calc(100% - 1.375rem) calc(100% - var(--chat-composer-context-extension)) with 100%
732 calc(100% - var(--chat-composer-context-extension) - 0.6156rem) / calc(100% - 0.6156rem)
730733 calc(100% - var(--chat-composer-context-extension)),
731 line to calc(100% - 22px) calc(100% - 16px),
732 curve to calc(100% - 38px) 100% with calc(100% - 22px) calc(100% - 7.16px) /
733 calc(100% - 29.16px) 100%,
734 line to 38px 100%,
735 curve to 22px calc(100% - 16px) with 29.16px 100% / 22px calc(100% - 7.16px),
736 line to 22px calc(100% - var(--chat-composer-context-extension)),
737 curve to 0 calc(100% - var(--chat-composer-context-extension) - 22px) with 9.85px
734 line to calc(100% - 1.375rem) calc(100% - 16px),
735 curve to calc(100% - 1.375rem - 16px) 100% with calc(100% - 1.375rem) calc(100% - 7.16px) /
736 calc(100% - 1.375rem - 7.16px) 100%,
737 line to calc(1.375rem + 16px) 100%,
738 curve to 1.375rem calc(100% - 16px) with calc(1.375rem + 7.16px) 100% / 1.375rem
739 calc(100% - 7.16px),
740 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
738742 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),
740744 line to 0 22px,
741745 close
742746 );