fix(chat): library polish — bubble width, chat.css drop, a2ui light variant, a11y#313
Merged
Conversation
Second in the cockpit dark mode polish series. Fixes the user-bubble text-wrap bug (max-width without fit-content), drops the duplicate chat.css token block in favor of chat-tokens.ts auto-injection, migrates the --a2ui-* namespace into the auto-injection path with a light variant (currently dark-only / broken in light mode), and closes two small a11y holes (control-btn focus ring, modal aria-label). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This was referenced May 15, 2026
blove
added a commit
that referenced
this pull request
May 15, 2026
) PR #313's `width: fit-content` on the bubble was insufficient. The bubble's `max-width: 80%` resolved against `.chat-message__main`, which collapsed to ~58px because of `flex: 1; min-width: 0` in the flex chain. Result: 80% of 58px = 46px cap on the bubble, still forcing "hello" to wrap as "hel" / "lo". Fix: for user-role messages, override `.chat-message__main` to `flex: none; width: fit-content; max-width: 80%`. The 80% cap now resolves against the host element (full row, 720px) and propagates correctly. Bubble itself drops the percentage cap (it would resolve against the now-content-sized main, creating a circular constraint). Assistant-role bubbles retain the 80% cap on the bubble directly — they're not in the flex collapse path. Verified: "hello" renders on one line. Bubble 58.5px wide, main column 53px, sized to content. Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
2 tasks
blove
added a commit
that referenced
this pull request
May 16, 2026
…00% (#362) * fix(chat): user-bubble word-wrap — give .chat-message__layout width:100% Short user messages like "Show me the dashboard" wrap mid-phrase ("Show me the" / "dashboard"). Fixed three times before in #313, #325, and c0b9e88, each by tweaking which element holds the 80% cap — none addressed the architecture. Root cause: user-role host is `display:flex; justify-content:flex-end` with no width on .chat-message__layout. __main has max-width:80%, which resolves against layout (its containing block). Layout in turn shrinks to __main's content (flex item with auto basis). The browser breaks the circular dependency by capping the bubble at its fit-content intrinsic (~166px = the wrap-point width) instead of max-content (~200px = full text on one line). Verified live: forced max-content = 199.75px, fit-content = 166.20px, with old layoutW = 207.75px — the bug is exact. Fix: layout gets width:100% so __main's 80% has a concrete (and full- row) containing block. Host switches from flex to block; right-alignment moves down to layout (`justify-content: flex-end` on the layout flex container). Verified via chrome MCP after fix: bubbleW = 199.75px (full max-content), mainW = 199.75px, layoutW = 720px (full row), bubble renders single-line right-aligned. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix(chat): escape backticks in chat-message style comment (CI break) --------- Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Second in a three-PR sequence (spec: `docs/superpowers/specs/2026-05-13-chat-lib-polish-design.md`, plan: `docs/superpowers/plans/2026-05-13-chat-lib-polish.md`).
PR 3 (cockpit ↔ website style alignment + chat lib palette unification with `--ds-*`) follows.
Test plan
🤖 Generated with Claude Code