From d6cf6761c24e83f2484dfaf635c4e3afe15a85a1 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Fri, 15 May 2026 11:08:17 -0700
Subject: [PATCH] =?UTF-8?q?fix(chat):=20user=20bubble=20width=20=E2=80=94?=
 =?UTF-8?q?=20move=2080%=20cap=20to=20.chat-message=5F=5Fmain?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 libs/chat/package.json                        |  2 +-
 .../src/lib/styles/chat-message.styles.ts     | 27 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/libs/chat/package.json b/libs/chat/package.json
index 4508d6193..fb77d1b62 100644
--- a/libs/chat/package.json
+++ b/libs/chat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/chat",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "exports": {
     ".": {
       "types": "./index.d.ts",
diff --git a/libs/chat/src/lib/styles/chat-message.styles.ts b/libs/chat/src/lib/styles/chat-message.styles.ts
index 1e7f001cb..66916add1 100644
--- a/libs/chat/src/lib/styles/chat-message.styles.ts
+++ b/libs/chat/src/lib/styles/chat-message.styles.ts
@@ -8,6 +8,27 @@ export const CHAT_MESSAGE_STYLES = `
     margin-top: 0.5rem;
   }
   :host([data-role="user"][data-prev-role="assistant"]) { margin-top: 1.5rem; }
+  /*
+   * For user-role messages, the bubble's containing column must size to
+   * content rather than collapse via the flex chain. Without this, the
+   * bubble's max-width: 80% (defined below) resolves against a collapsed
+   * parent (~58px instead of the full row), capping the bubble below
+   * intrinsic single-word width and forcing mid-word wraps like
+   * "hello" → "hel" / "lo". See PR #313 follow-up.
+   */
+  :host([data-role="user"]) .chat-message__main {
+    flex: none;
+    width: fit-content;
+    max-width: 80%;
+  }
+  /*
+   * Assistant bubbles aren't in the flex collapse path, so the 80% cap
+   * lives on the bubble itself for that role. (User bubbles get the cap
+   * on .chat-message__main above instead.)
+   */
+  :host([data-role="assistant"]) .chat-message__bubble {
+    max-width: 80%;
+  }
   :host([data-role="assistant"]) {
     display: block;
     position: relative;
@@ -20,8 +41,12 @@ export const CHAT_MESSAGE_STYLES = `
   :host([data-role="assistant"]):first-child { margin-top: 0; }
 
   .chat-message__bubble {
+    /*
+     * No max-width here for user-role bubbles — the cap is applied on
+     * .chat-message__main above. Assistant-role bubbles inherit the
+     * host's max-width: 100% so no per-bubble cap needed either.
+     */
     width: fit-content;
-    max-width: 80%;
     padding: 8px 12px;
     border-radius: var(--ngaf-chat-radius-bubble);
     background: var(--ngaf-chat-primary);