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) <noreply@runfusion.ai>

.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.

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;

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

@@ -2533,6 +2533,48 @@ describe("TaskChatTab", () => {
     expect(mainContentSource).toContain("<TaskDetailContent");
   });
 
+  it("keeps task detail chat block inner padding tokenized across text, tool, and thinking surfaces", () => {
+    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");