fix(web): align composer inline chips with prompt text

[StiensWout]

Summary

The Prompt font preview's inline skill pill sat low relative to surrounding text when custom prompt fonts were used. The first pass corrected the outer pill placement; this follow-up corrects the smaller label glyph position inside that pill.

The shared composer inline-token wrapper uses a small em-based negative vertical alignment. The smaller skill label gets a scoped em-based relative offset so its glyph bottom aligns with surrounding prompt text without moving the pill box or changing the editor's line height; shared file and terminal-context labels retain their existing positioning.

Validation

• vp fmt --check apps/web/src/components/ComposerPromptEditor.tsx

• vp lint apps/web/src/components/ComposerPromptEditor.tsx --report-unused-disable-directives

• vp fmt --check apps/web/src/components/composerInlineChip.ts

• vp lint apps/web/src/components/composerInlineChip.ts --report-unused-disable-directives

• vp run --filter @t3tools/web typecheck

• vp run --filter @t3tools/web build

• Browser verification at desktop and 390px widths: the label bottom moved from 619.25px to 621.05px, matching surrounding text at 621.06px; the pill box stayed unchanged and the narrow layout had no clipping.

• The label offset is scoped to composer skill chips; shared chat and terminal label styles remain unchanged.

• Visual evidence:

  Before	After

• The focused Vitest command was attempted after vp i, but the runner failed before test execution with TypeError: Cannot read properties of undefined (reading 'config'); the same runner-stage failure reproduced on an unrelated web test.

Model/harness: Codex (GPT-5.6-Luna) via T3 Code.

---

Note

Low Risk
CSS-only presentation tweaks in the composer prompt editor; no behavior, auth, or data changes.

Overview
Fixes composer inline chips (file mentions, skills, terminal context) sitting low relative to surrounding prompt text, especially with custom prompt fonts.

Lexical decorator wrappers for those chips now use align-[-0.125em] instead of align-middle so the pill aligns with the prompt line without changing line height. Skill chips additionally get COMPOSER_INLINE_SKILL_CHIP_LABEL_CLASS_NAME with relative top-[0.15em] so the smaller label glyphs line up with adjacent text while the pill box stays put.

^{Reviewed by Cursor Bugbot for commit b727ac1. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix vertical alignment of inline chips in the composer prompt editor

Changes the vertical alignment of mention, skill, and terminal context chips from align-middle to align-[-0.125em] so chips sit flush with surrounding prompt text. Also adds a new COMPOSER_INLINE_SKILL_CHIP_LABEL_CLASS_NAME constant in composerInlineChip.ts that applies an additional relative top-[0.15em] offset to correct glyph positioning within skill chip labels.

^{Macroscope summarized b727ac1.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: a6e1ce37-fba2-4fa8-930b-cb6a5edef11c

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved b727ac1

Pure CSS alignment fix - changes vertical alignment values and adds a small label offset class for inline chips. No logic or behavior changes, only visual positioning adjustments.

^{You can customize Macroscope's approvability policy. Learn more.}

Dismissing prior approval to re-evaluate 7865726

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 7865726. Configure here.}