Skip to content

Commit 22c98c0

Browse files
committed
fix(emcn): give chip text fields the same tracking as their mirrors
An audit of the previous commit found the letter-spacing fix was incomplete: it landed on `Input`/`Textarea` but not on the chip family, so `ChipInput` and `ChipTextarea` kept the UA `letter-spacing: normal` while any overlay mirroring them inherited the ambient tracking. The MCP server form modal is a live instance — its shared `FormattedInput` layers a transparent `ChipInput` under a visible div, across the server URL and both header fields, whose values are long by nature. The caret separated from the text by roughly 0.28px per character. Fixed on `chipFieldTextClass` rather than the call site, so every chip field matches its mirror the way `Input`/`Textarea` already do.
1 parent 94c9f1f commit 22c98c0

1 file changed

Lines changed: 11 additions & 2 deletions

File tree

packages/emcn/src/components/chip/chip-chrome.ts

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,18 @@ export const chipFieldSurfaceClass = `rounded-lg ${chipFilledSurfaceTokens} tran
2626
*/
2727
export const chipBorderShadowRing =
2828
'shadow-[0_0_0_1px_rgba(28,40,64,0.08),0_1px_3px_0_rgba(28,40,64,0.1)] dark:shadow-[0_0_0_1px_var(--border-1),0_1px_3px_0_rgba(0,0,0,0.3)]'
29-
/** Typography shared by the chip text fields — normal weight, `--text-body`, muted placeholder, no focus outline. */
29+
/**
30+
* Typography shared by the chip text fields — normal weight, `--text-body`, muted
31+
* placeholder, no focus outline.
32+
*
33+
* `[letter-spacing:inherit]` undoes the UA stylesheet, which pins form controls to
34+
* `letter-spacing: normal`. Without it a chip field's text tracks differently from
35+
* the labels around it, and any transparent-field-over-mirror overlay diverges from
36+
* its mirror by the inherited tracking on every character — so the caret drifts
37+
* further from the visible text the longer the value. Matches `Input`/`Textarea`.
38+
*/
3039
export const chipFieldTextClass =
31-
'text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)]'
40+
'text-[var(--text-body)] text-sm [letter-spacing:inherit] outline-none placeholder:text-[var(--text-muted)]'
3241

3342
/**
3443
* Icon↔label gap of the canonical chip-content row — the icon↔label pair inside

0 commit comments

Comments
 (0)