From a583446e6041de27cb5e3d8efd33cf7006ea9eef Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Sun, 28 Jun 2026 16:39:25 -0700 Subject: [PATCH] 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) --- .changeset/fn-7207-task-chat-narrow-width.md | 7 +++++ .../dashboard/app/components/TaskChatTab.css | 30 +++++++++++++++++++ .../components/__tests__/TaskChatTab.test.tsx | 23 ++++++++++++++ 3 files changed, 60 insertions(+) create mode 100644 .changeset/fn-7207-task-chat-narrow-width.md diff --git a/.changeset/fn-7207-task-chat-narrow-width.md b/.changeset/fn-7207-task-chat-narrow-width.md new file mode 100644 index 0000000000..34dd2b8c77 --- /dev/null +++ b/.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%. diff --git a/packages/dashboard/app/components/TaskChatTab.css b/packages/dashboard/app/components/TaskChatTab.css index 6a8d1b067d..6036f0f41c 100644 --- a/packages/dashboard/app/components/TaskChatTab.css +++ b/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; diff --git a/packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx b/packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx index d3d025437b..028e4583a3 100644 --- a/packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx +++ b/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");