FN-7303: add workflow badge icon spacing

Add token-based spacing so workflow badge icons read clearly beside labels.

- Add consistent column gaps to task-card and task-detail workflow badges.
- Cover badge icon-label ordering and spacing expectations in dashboard tests.
- Add a patch changeset for the published Fusion package.

Files changed:
 .changeset/workflow-badge-spacing.md                           |  7 +++++++
 packages/dashboard/app/components/TaskCard.css                 |  4 ++++
 packages/dashboard/app/components/TaskDetailModal.css          |  5 +++++
 packages/dashboard/app/components/__tests__/TaskCard.test.tsx  | 10 ++++++++--
 .../TaskDetailModal.responsive-and-dependencies.test.tsx       |  1 +
 5 files changed, 25 insertions(+), 2 deletions(-)

Fusion-Task-Id: FN-7303
Fusion-Task-Lineage: 6d129e6c-0f8a-43c2-9c6d-88ff9acd520f
Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>

.changeset/workflow-badge-spacing.md

@@ -0,0 +1,7 @@
+---
+"@runfusion/fusion": patch
+---
+
+summary: Add clearer spacing between workflow badge icons and labels.
+category: fix
+dev: Applies token-based column gaps to dashboard task-card and task-detail workflow badges.

packages/dashboard/app/components/TaskCard.css

@@ -218,6 +218,9 @@ Aggregate Board cards need a compact workflow-name badge so operators can identi
 
 FNXC:WorkflowBoard 2026-06-30-00:00:
 All workflows cards need workflow identity at the bottom-left below every other card icon/action/meta row, so the wrapper is rendered after those rows and left-aligns the neutral badge without adding click targets.
+
+FNXC:WorkflowBadges 2026-06-30-00:00:
+Workflow badges need a slight token-based gap between icon and label so compact workflow identity remains readable without changing placement, clickability, or truncation behavior.
 */
 .card-workflow-badge-row {
   display: flex;
@@ -228,6 +231,7 @@ All workflows cards need workflow identity at the bottom-left below every other
 }
 
 .card-workflow-badge {
+  column-gap: calc(var(--space-xs) / 2);
   max-width: min(100%, 18ch);
   background: var(--surface-2);
   border-color: var(--border);

packages/dashboard/app/components/TaskDetailModal.css

@@ -48,7 +48,12 @@ The gray top header band (task id + column badge) was over-padded. Trim its vert
   text-transform: uppercase;
 }
 
+/*
+FNXC:WorkflowBadges 2026-06-30-00:00:
+Task detail workflow badges share the board badge's slight token-based icon-to-label gap so the canonical metadata badge stays readable while preserving inline truncation and timestamp ownership.
+*/
 .detail-workflow-badge {
+  column-gap: calc(var(--space-xs) / 2);
   font-size: 0.6875rem;
   padding: calc(var(--space-xs) / 2) var(--space-sm);
   border-radius: var(--radius-pill);

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

@@ -4998,13 +4998,19 @@ describe("TaskCard workflow badges", () => {
         task={makeTask()}
         onOpenDetail={noop}
         addToast={noop}
-        workflowBadge={{ workflowId: "wf-custom", workflowName: "Custom Flow" }}
+        workflowBadge={{ workflowId: "wf-custom", workflowName: "Custom Flow", workflowIcon: "⚙️" }}
       />,
     );
 
     const badge = screen.getByTestId("card-workflow-badge");
     const row = screen.getByTestId("card-workflow-badge-row");
+    const workflowBadgeBlock = [...loadAllAppCssBaseOnly().matchAll(/^\.card-workflow-badge\s*\{([^}]*)\}/gm)]
+      .map((match) => match[1])
+      .join("\n");
     expect(badge).toHaveTextContent("Custom Flow");
+    expect(badge.querySelector(".workflow-icon")).not.toBeNull();
+    expect(badge.querySelector(".workflow-icon")?.nextElementSibling).toHaveTextContent("Custom Flow");
+    expect(workflowBadgeBlock).toContain("column-gap: calc(var(--space-xs) / 2);");
     expect(badge).toHaveAttribute("data-workflow-id", "wf-custom");
     expect(badge).toHaveAccessibleName("Workflow Custom Flow");
     expect(row).toContainElement(badge);
@@ -5042,7 +5048,7 @@ describe("TaskCard workflow badges", () => {
         })}
         onOpenDetail={noop}
         addToast={noop}
-        workflowBadge={{ workflowId: "wf-long", workflowName: "Very long custom workflow name for aggregate cards" }}
+        workflowBadge={{ workflowId: "wf-long", workflowName: "Very long custom workflow name for aggregate cards", workflowIcon: "🧭" }}
       />,
     );
 

packages/dashboard/app/components/__tests__/TaskDetailModal.responsive-and-dependencies.test.tsx

@@ -129,6 +129,7 @@ describe("TaskDetailModal", () => {
 
       expect(workflowBadgeBlock).toContain("display: inline-flex;");
       expect(workflowBadgeBlock).toContain("align-items: center;");
+      expect(workflowBadgeBlock).toContain("column-gap: calc(var(--space-xs) / 2);");
       expect(workflowBadgeBlock).toContain("flex: 0 1 auto;");
       expect(workflowBadgeBlock).toContain("text-overflow: ellipsis;");
       expect(mobileTimestampsBlock).toContain("display: flex;");