From 9a69de9fe16251fd1357a3a99798507d47a4cef4 Mon Sep 17 00:00:00 2001 From: Williawar <28518115+Williawar@users.noreply.github.com> Date: Sat, 8 Aug 2026 23:42:16 +1000 Subject: [PATCH] fix(web): express composer glass step-in in rem to track interface font size The context strip is laid out in rem (w-[calc(100%-2.75rem)]) but the glass slab's shape() stepped in with px constants, so the slab overhung the strip's border whenever Typography > Interface font size was not 16. Convert the step-in positions and their curve controls to rem (22px -> 1.375rem, 9.85px -> 0.6156rem, 38px -> 1.375rem + 16px, 29.16px -> 1.375rem + 7.16px); the composer's 22px top radius and the strip's 16px/7.16px bottom radius are px by design and stay px. Fixes #5662 Co-Authored-By: Claude Fable 5 --- apps/web/src/index.css | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 0b1cae8c5c7c..a29efd2d6472 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -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 );