fix(chat): user bubble width — move 80% cap to .chat-message__main#325
Merged
Conversation
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>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
Follow-up to PR #313's text-wrap fix, which was insufficient. The bubble's `width: fit-content` couldn't escape a containing-block collapse: the bubble's `max-width: 80%` resolves against `.chat-message__main`, which collapsed to ~58px because of `flex: 1; min-width: 0` in the flex chain. Result: `80% × 58px = 46px` cap on the bubble — still narrower than "hello" — so "hello" rendered as "hel" / "lo".
Fix: for user-role messages, override `.chat-message__main`:
```css
:host([data-role="user"]) .chat-message__main {
flex: none;
width: fit-content;
max-width: 80%;
}
```
Now the 80% cap resolves against the host (full row, 720px), not the collapsed flex item. Bubble itself drops its percentage cap to avoid a circular constraint (bubble max-width 80% of fit-content main = 80% of bubble = recursive). Assistant-role bubbles retain the 80% cap on the bubble directly — they're not in the flex collapse path.
Verified manually: "hello" renders on one line, bubble 58.5px wide, main column 53px, sized to content. Tested via chrome MCP at localhost:4507 (cockpit-chat-timeline-angular standalone) after CSS hot-reload.
Test plan
🤖 Generated with Claude Code