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");