FN-7207: widen task-detail chat in narrow hosts

Task-detail chat now adapts message width to narrow host containers while preserving wide layouts.

- Add a task chat container query that switches narrow hosts to the one-column chat layout.
- Widen user message bubbles to the full host width in right-side and narrow detail panels.
- Cover the CSS behavior with a targeted TaskChatTab regression test and add a patch changeset.

Files changed:
 .changeset/fn-7207-task-chat-narrow-width.md       |  7 +++++
 packages/dashboard/app/components/TaskChatTab.css  | 30 ++++++++++++++++++++++
 .../app/components/__tests__/TaskChatTab.test.tsx  | 23 +++++++++++++++++
 3 files changed, 60 insertions(+)

Fusion-Task-Id: FN-7207

Fusion-Task-Lineage: d36fc06d-1e0c-4313-b764-13f31fe09d71

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>

.changeset/fn-7207-task-chat-narrow-width.md

@@ -0,0 +1,7 @@
+---
+"@runfusion/fusion": patch
+---
+
+summary: Task-detail chat messages now use the full width in the right sidebar and narrow detail views.
+category: fix
+dev: TaskChatTab.css makes .task-chat-tab a `container-type: inline-size` query container and adds `@container task-chat-tab (max-width: 34rem)` collapsing the agent-header grid column and widening `.task-chat-entry--user` to 100%.

packages/dashboard/app/components/TaskChatTab.css

@@ -7,6 +7,9 @@
   gap: var(--space-sm);
   min-height: 0;
   height: 100%;
+  /* FNXC:TaskDetailChat 2026-06-28-00:00: FN-7207 requires narrow task-detail chat hosts (right-side dock detail, narrow split, and floating hosts) to collapse the agent-header column and widen message bubbles based on the chat host width rather than the viewport. */
+  container-type: inline-size;
+  container-name: task-chat-tab;
 }
 
 .task-chat-expand-toggle {
@@ -219,6 +222,33 @@ List View split-pane detail can be narrow while the global viewport is desktop-s
   box-shadow: var(--shadow-sm);
 }
 
+/*
+FNXC:TaskDetailChat 2026-06-28-00:00:
+FN-7207 makes the right-side dock and narrow desktop detail hosts use the same readable one-column chat layout as mobile without changing wide modal, board main-panel, or expanded chat layouts above this host-width breakpoint.
+*/
+@container task-chat-tab (max-width: 34rem) {
+  .task-chat-group {
+    grid-template-columns: 1fr;
+  }
+
+  .task-chat-group-header {
+    min-width: 0;
+  }
+
+  .task-chat-user-group {
+    align-items: stretch;
+  }
+
+  .task-chat-user-header {
+    align-self: flex-end;
+    justify-content: flex-end;
+  }
+
+  .task-chat-entry--user {
+    max-width: 100%;
+  }
+}
+
 .task-chat-tool-group,
 .task-chat-thinking {
   min-width: 0;

packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx

@@ -2480,6 +2480,29 @@ describe("TaskChatTab", () => {
     expect(source).toContain("expanded={chatExpanded}");
   });
 
+  it("widens task chat messages in narrow host containers without changing desktop layout", () => {
+    const css = readFileSync(resolve(__dirname, "../TaskChatTab.css"), "utf8");
+    const hostRule = getCssRuleBlock(css, ".task-chat-tab");
+    const desktopGroupRule = getCssRuleBlock(css, ".task-chat-group");
+    const listSplitGroupRule = getCssRuleBlock(css, ".list-split-detail-content .task-chat-group");
+    const mobileCss = getCssAfter(css, "@media (max-width: 768px)");
+    const mobileGroupRule = getCssRuleBlock(mobileCss, ".task-chat-group");
+    const narrowHostCss = getCssAfter(css, "@container task-chat-tab (max-width: 34rem)");
+    const narrowHostGroupRule = getCssRuleBlock(narrowHostCss, ".task-chat-group");
+    const narrowHostHeaderRule = getCssRuleBlock(narrowHostCss, ".task-chat-group-header");
+    const narrowHostUserEntryRule = getCssRuleBlock(narrowHostCss, ".task-chat-entry--user");
+
+    expect(hostRule).toContain("container-type: inline-size");
+    expect(hostRule).toContain("container-name: task-chat-tab");
+    expect(desktopGroupRule).toContain("grid-template-columns: auto minmax(0, 1fr)");
+    expect(css).toContain("@container task-chat-tab (max-width: 34rem)");
+    expect(narrowHostGroupRule).toContain("grid-template-columns: 1fr");
+    expect(narrowHostHeaderRule).toContain("min-width: 0");
+    expect(narrowHostUserEntryRule).toContain("max-width: 100%");
+    expect(listSplitGroupRule).toContain("grid-template-columns: 1fr");
+    expect(mobileGroupRule).toContain("grid-template-columns: 1fr");
+  });
+
   it("stacks agent headers only inside the List View split-detail chat host", () => {
     const css = readFileSync(resolve(__dirname, "../TaskChatTab.css"), "utf8");
     const desktopGroupRule = getCssRuleBlock(css, ".task-chat-group");