fix(Chat): center inline tokens on the line box

[Geervan]

Fixes #6412

Description

Inline token badges (e.g. @mentions, #tags, /commands) rendered inside ChatComposerInput (via useChatComposerTokens) and ChatTokenizedText exhibited vertical misalignment against surrounding text.

The Problem

Both rendering sites previously used display: inline-flex with vertical-align: middle:

• By CSS specification, vertical-align: middle anchors the vertical midpoint of the inline box to baseline + 0.5 * x-height of the parent element, ignoring the box's actual height and line height.
• For a 20px token badge on a 22px line height, this calculation places the chip's center ~1.8px below the line box's optical center.
• Against CJK glyphs (which fill the majority of the em box) and mixed-case Latin text, the token visibly sagged below the text's baseline and optical midline.

The Fix

This PR updates the token container styling across all 3 token-rendering sites to:

display: inline-flex;
align-items: center;
height: 1lh;
vertical-align: top;

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
astryx	Ready	Preview	Sep 21, 2026 12:34pm UTC

[astracat-bot]

AI review status for this pull request.

Review status	Updated
⏳ Waiting for review (for maintainers only)	Sep 21, 2026, 11:34 PM UTC

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

No new or modified components detected.

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.8KB	1.2KB

Accessibility Audit

Status: 36 accessibility violation(s) found — 2 critical, 34 serious.

Button pattern - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/18 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

ChatComposer - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/19 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

ChatComposerInput - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/14 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

ChatReasoning - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 4/5 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

ChatToolCalls - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 10/11 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Checkbox pattern - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/33 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

CheckboxList - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 4/17 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

ClickableCard - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/5 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

CodeEditor - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 3/7 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

CodeEditorPerf - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/2 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

CodeEditorTheme - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 13/14 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

CodeTheme - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 14/16 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

DateRangeInput - 1 issue(s)

• 🔴 critical: Ensure an element's role supports its ARIA attributes
  • Rule: aria-allowed-attr · Affects 1/21 stories · Learn more
  • WCAG: 4.1.2 (Level A)

FileInput - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 3/15 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

GridMasonry - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/3 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Heading - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/16 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Icon - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/18 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

LogStream - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/3 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

MediaTheme Auto - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/5 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

PowerSearch - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/26 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

ProgressBar - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/18 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Radio group pattern - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 3/26 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

RadioList - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 3/14 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

RichTextEditor - 2 issue(s)

• 🟠 serious: Ensure every ARIA input field has an accessible name
  • Rule: aria-input-field-name · Affects 2/18 stories · Learn more
  • WCAG: 4.1.2 (Level A)
• 🔴 critical: Ensure every form element has a label
  • Rule: label · Affects 1/18 stories · Learn more
  • WCAG: 4.1.2 (Level A)

SelectableCard - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/4 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Stepper - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/30 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

TableGroupedRows - 1 issue(s)

• 🟠 serious: Ensure ARIA attributes are used as described in the specification of the element's role
  • Rule: aria-conditional-attr · Affects 3/3 stories · Learn more
  • WCAG: 4.1.2 (Level A)

TableTree - 1 issue(s)

• 🟠 serious: Ensure ARIA attributes are used as described in the specification of the element's role
  • Rule: aria-conditional-attr · Affects 8/9 stories · Learn more
  • WCAG: 4.1.2 (Level A)

Text - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/23 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Theme - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/5 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

PopArt - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 3/6 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Thumbnail - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/12 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Timestamp - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 1/20 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Token - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/10 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Tokenizer - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/24 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

Visual Regression

Status: No visual change across 2 compared shot(s).

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}