[Bug] ChatTokenizedText/insertToken: vertical-align middle centres a token chip on the x-height midline, so it sits low against CJK and mixed-case text

[Astro-Han]

Description

Both places that render an inline token — the contenteditable="false" span insertToken creates and ChatTokenizedText's token wrapper — use display: inline-flex with vertical-align: middle. middle centres the box on the parent's x-height midline and ignores the box's height, so a 20px chip on a 22px line lands ~1.8px below the line's visual centre. Against CJK glyphs (which fill more of the em box) and mixed-case Latin the chip visibly sits low.

The two sites must carry identical declarations, or a token visibly moves when a staged message is sent and the composer span is re-rendered by ChatTokenizedText.

Expected: the chip is centred on the line box. Making the token box one line box tall with the pill centred inside — height: 1lh; align-items: center; vertical-align: top — does this; top places the box on the line box itself, which middle cannot express.

Reproduction

1. Render ChatComposerInput, insert a 20px badge token, then type CJK text on a 22px line (line-height: 22px).
2. Measure the chip's getBoundingClientRect centre against the text line's centre: ~1.8px low.
3. Same wrapper styles in ChatTokenizedText (src/Chat/ChatTokenizedText.tsx token style, verticalAlign: 'middle' at line 40).

Astryx Version

@astryxdesign/core@0.6.2

Environment

Electron (Chromium), macOS. Found in Apache Maka; we carry a patch adding alignItems: center; height: 1lh; vertical-align: top to both sites. Measured on our composer story: chip centre 1.81px below line centre → 0.5px.