From 6ce61affe09a07f0243c67c8a810a719a78262bf Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Mon, 29 Jun 2026 09:07:04 -0700 Subject: [PATCH] FN-7231: add padding to task chat blocks Add tokenized inner spacing to Task Detail chat message surfaces. - Add border-boxed padding to task chat entries, tool groups, tool entries, thinking blocks, and tool details. - Keep mobile chat block spacing responsive with scoped TaskChatTab CSS overrides. - Cover text, user, tool, thinking, and mobile padding expectations with a regression test. - Add a patch changeset for the published Fusion package. Files changed: .changeset/fn-7231-task-chat-block-padding.md | 7 ++++ packages/dashboard/app/components/TaskChatTab.css | 20 +++++++++-- .../app/components/__tests__/TaskChatTab.test.tsx | 42 ++++++++++++++++++++++ 3 files changed, 67 insertions(+), 2 deletions(-) Fusion-Task-Id: FN-7231 Fusion-Task-Lineage: 2c6bee23-14fb-4a76-99a8-99528f35013a Co-authored-by: Fusion (runfusion.ai) --- .changeset/fn-7231-task-chat-block-padding.md | 7 ++++ .../dashboard/app/components/TaskChatTab.css | 20 ++++++++- .../components/__tests__/TaskChatTab.test.tsx | 42 +++++++++++++++++++ 3 files changed, 67 insertions(+), 2 deletions(-) create mode 100644 .changeset/fn-7231-task-chat-block-padding.md diff --git a/.changeset/fn-7231-task-chat-block-padding.md b/.changeset/fn-7231-task-chat-block-padding.md new file mode 100644 index 0000000000..268b5dd890 --- /dev/null +++ b/.changeset/fn-7231-task-chat-block-padding.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Add inner padding to Task Detail chat message blocks. +category: fix +dev: Keeps text, user, tool, and thinking block padding tokenized and border-boxed with responsive regression coverage. diff --git a/packages/dashboard/app/components/TaskChatTab.css b/packages/dashboard/app/components/TaskChatTab.css index 218b477aae..98f1181177 100644 --- a/packages/dashboard/app/components/TaskChatTab.css +++ b/packages/dashboard/app/components/TaskChatTab.css @@ -205,9 +205,14 @@ List View split-pane detail can be narrow while the global viewport is desktop-s color: var(--text-muted); } +/* +FNXC:TaskDetailChat 2026-06-29-07:41: +FN-7231 requires task-detail chat text, user, tool, and thinking blocks to keep tokenized inner padding so transcript content does not sit against bordered block edges. Include padding inside block sizing so user bubbles still honor the responsive max width. Keep the spacing scoped to TaskChatTab selectors so regular ChatView spacing is unchanged. +*/ .task-chat-entry { + box-sizing: border-box; min-width: 0; - padding: var(--space-sm) var(--space-md); + padding: var(--space-md); border: var(--btn-border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--surface); @@ -251,7 +256,9 @@ FN-7207 makes the right-side dock and narrow desktop detail hosts use the same r .task-chat-tool-group, .task-chat-thinking { + box-sizing: border-box; min-width: 0; + padding: var(--space-md); border: var(--btn-border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--surface); @@ -347,8 +354,9 @@ FN-7215 aligns task-detail tool-call summaries with regular Chat's compact colla } .task-chat-tool-entry { + box-sizing: border-box; min-width: 0; - padding: var(--space-xs); + padding: var(--space-sm); border: var(--btn-border-width) solid color-mix(in srgb, var(--border) 85%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 35%, transparent); @@ -409,8 +417,10 @@ FN-7215 aligns task-detail tool-call summaries with regular Chat's compact colla } .task-chat-tool-detail { + box-sizing: border-box; margin: var(--space-xs) 0 0; max-width: 100%; + padding: var(--space-xs); overflow-x: auto; white-space: pre-wrap; word-break: break-word; @@ -524,6 +534,12 @@ FN-6660 corrects the repeated mobile sizing misses from FN-6507, FN-6604, and FN max-width: 100%; } + .task-chat-entry, + .task-chat-tool-group, + .task-chat-thinking { + padding: var(--space-sm); + } + .task-chat-tool-group-summary { align-items: center; flex-direction: row; diff --git a/packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx b/packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx index b060d7e1e4..9fca940bc1 100644 --- a/packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx +++ b/packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx @@ -2533,6 +2533,48 @@ describe("TaskChatTab", () => { expect(mainContentSource).toContain(" { + const css = readFileSync(resolve(__dirname, "../TaskChatTab.css"), "utf8"); + const entryRule = getCssRuleBlock(css, ".task-chat-entry"); + const userRule = getCssRuleBlock(css, ".task-chat-entry--user"); + const toolGroupRule = getCssRuleBlock(css, ".task-chat-tool-group"); + const toolSummaryRule = getCssRuleBlock(getCssAfter(css, "FN-7215 aligns task-detail tool-call summaries"), ".task-chat-tool-group-summary"); + const toolEntriesRule = getCssRuleBlock(getCssAfter(css, ".task-chat-tool-group-entries {\n gap"), ".task-chat-tool-group-entries"); + const toolEntryRule = getCssRuleBlock(css, ".task-chat-tool-entry"); + const thinkingRule = getCssRuleBlock(css, ".task-chat-thinking"); + const thinkingBodyRule = getCssRuleBlock(css, ".task-chat-thinking-body"); + const toolDetailRule = getCssRuleBlock(getCssAfter(css, ".task-chat-tool-detail {"), ".task-chat-tool-detail"); + const mobileCss = getCssAfter(css, "@media (max-width: 768px)"); + const mobileBlockPaddingCss = getCssAfter(mobileCss, ".task-chat-entry,\n .task-chat-tool-group,\n .task-chat-thinking"); + const mobileEntryRule = getCssRuleBlock(mobileBlockPaddingCss, ".task-chat-entry"); + const mobileToolGroupRule = getCssRuleBlock(mobileBlockPaddingCss, ".task-chat-tool-group"); + const mobileThinkingRule = getCssRuleBlock(mobileBlockPaddingCss, ".task-chat-thinking"); + const mobileToolEntryRule = getCssRuleBlock(mobileCss, ".task-chat-tool-entry"); + + expect(entryRule).toContain("box-sizing: border-box"); + expect(entryRule).toContain("padding: var(--space-md)"); + expect(userRule).not.toContain("padding"); + expect(toolGroupRule).toContain("box-sizing: border-box"); + expect(toolGroupRule).toContain("padding: var(--space-md)"); + expect(thinkingRule).toContain("box-sizing: border-box"); + expect(thinkingRule).toContain("padding: var(--space-md)"); + expect(toolSummaryRule).toContain("padding: var(--space-xs)"); + expect(toolEntriesRule).toContain("padding: 0 var(--space-xs) var(--space-xs)"); + expect(thinkingBodyRule).toContain("padding: 0 var(--space-md) var(--space-md)"); + expect(toolEntryRule).toContain("box-sizing: border-box"); + expect(toolEntryRule).toContain("padding: var(--space-sm)"); + expect(toolDetailRule).toContain("box-sizing: border-box"); + expect(toolDetailRule).toContain("padding: var(--space-xs)"); + expect(mobileEntryRule).toContain("padding: var(--space-sm)"); + expect(mobileToolGroupRule).toContain("padding: var(--space-sm)"); + expect(mobileThinkingRule).toContain("padding: var(--space-sm)"); + expect(mobileToolEntryRule).toContain("padding: var(--space-xs)"); + for (const rule of [entryRule, toolGroupRule, toolEntryRule, thinkingRule, toolDetailRule, mobileEntryRule]) { + expect(rule).not.toContain("px"); + expect(rule).not.toContain("#"); + } + }); + it("keeps task chat timestamp styling tokenized and mobile-safe", () => { const css = readFileSync(resolve(__dirname, "../TaskChatTab.css"), "utf8"); const groupMetaRule = getCssRuleBlock(css, ".task-chat-group-meta");