hanzoai/chat
2
0
Fork 0
mirror of https://github.com/hanzoai/chat.git synced 2026-09-30 20:51:17 +00:00
Code Issues Releases Activity

the ring follows the composer's corner

Browse Source 
Every chat drew a hard square outline 1.5px outside a 24px-rounded composer.

The ring is `.hz-composer::before` with `border-radius: inherit`, and the host
had nothing to inherit: postcss-preset-env inlines custom properties, keeps a
declaration whose value it can resolve — `padding` shipped as `1.5px` — and
DROPS one it cannot. `--hz-composer-radius` is `var(--radius-composer, 9999px)`,
a var pointing at a var, which it does not follow, so the package's
`border-radius: var(--hz-composer-radius)` never reached the bundle. The shipped
rule is `position:relative;isolation:isolate;padding:1.5px`. The halo escaped
only because `::after` computes `calc(radius + inset)`, which survived — which is
why the glow was round while the edge it sits outside was square.

A utility class is a literal and cannot be dropped, so the host wears the same
corner class the panel already wears. One value, stated once, in the file that
already held it. `--hz-composer-radius` stays, because the halo still derives its
wider corner from it.

Measured on the live page: host and ring 0px, and 24px once the host carries the
class.
This commit is contained in:
zooqueen
2026-08-28 09:10:37 -07:00
parent c2c09e3f53
commit 06c2c01be2
1 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Chat/Input/ComposerShell.tsx
+19 -4
View File
@@ -44,12 +44,27 @@ export default function ComposerShell({
onClick,
temporary = false,
}: ComposerShellProps) {
// The PANEL's corner. The host's is @hanzo/composer's `--hz-composer-radius`
// (style.css sets it to this same 1.5rem), because the halo derives its own
// wider corner from that property and cannot follow a utility class.
// ONE CORNER, WORN BY BOTH BOXES, and the host has to wear it as a class.
//
// The package states it — `.hz-composer { border-radius: var(--hz-composer-radius) }`
// — and that declaration does not survive our build. postcss-preset-env
// inlines custom properties, resolves the ones whose value is a literal
// (`padding` came out `1.5px`) and DROPS a declaration it cannot resolve;
// `--hz-composer-radius` is `var(--radius-composer, 9999px)`, a var pointing
// at a var, which it does not follow. So the shipped rule reads
// `position:relative;isolation:isolate;padding:1.5px` and no radius at all.
//
// The ring is `::before` with `border-radius: inherit`, so it inherited that
// nothing and painted a SQUARE around a 24px panel — a hard-cornered outline
// 1.5px outside the glass, on every chat. The halo escaped it only because
// `::after` computes `calc(radius + inset)`, which preset-env kept.
//
// A utility class is a literal and cannot be dropped, so the corner is stated
// once here and worn by the host and the panel alike. `--hz-composer-radius`
// stays: the halo still derives its wider corner from it.
const radius = 'rounded-3xl';
return (
<div className={cn('hz-composer w-full', temporary && 'private')}>
<div className={cn('hz-composer w-full', radius, temporary && 'private')}>
<div
onClick={onClick}
className={cn(