feat(FN-4104): wrap workflow result headers and warn on overlapping in-prog

Adds warning logic when overlapping in-progress step updates occur, and wraps workflow result table headers with proper text handling and styling in the dashboard UI.

Fusion-Task-Id: FN-4104

packages/dashboard/app/components/WorkflowResultsTab.css

@@ -85,18 +85,27 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--space-sm);
+  flex-wrap: wrap;
 }
 
 .workflow-configured-title-row {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
+  flex: 1;
+  flex-wrap: wrap;
+  min-width: 0;
 }
 
 .workflow-configured-title-row h4 {
   margin: 0;
   font-size: calc(var(--space-md) + var(--space-xs) * 0.5);
   color: var(--text);
+  min-width: 0;
+}
+
+.workflow-configured-header .workflow-results-edit-toggle {
+  flex-shrink: 0;
 }
 
 .workflow-configured-count {
@@ -126,11 +135,19 @@
 .workflow-configured-name {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+  min-width: 0;
   font-weight: 600;
   font-size: calc(var(--space-md) + var(--space-xs) * 0.5);
   color: var(--text);
 }
 
+.workflow-configured-name-text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .workflow-configured-description {
   margin: var(--space-xs) 0 0;
   font-size: calc(var(--space-sm) + var(--space-xs));
@@ -374,18 +391,25 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: var(--space-sm);
   padding: var(--space-md) var(--space-lg);
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
+  flex-wrap: wrap;
 }
 
 .workflow-output-modal-title {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
+  flex: 1;
+  flex-wrap: wrap;
+  min-width: 0;
 }
 
 .workflow-output-modal-name {
+  min-width: 0;
+  overflow-wrap: anywhere;
   font-weight: 600;
   font-size: calc(var(--space-md) + var(--space-xs) * 0.5);
   color: var(--text);
@@ -395,6 +419,8 @@
   display: flex;
   align-items: center;
   gap: var(--space-sm);
+  flex-wrap: wrap;
+  justify-content: flex-end;
 }
 
 .workflow-output-modal-close {
@@ -478,6 +504,28 @@
     min-height: calc(var(--space-lg) * 2 + var(--space-xs));
   }
 
+  .workflow-configured-header {
+    align-items: flex-start;
+  }
+
+  .workflow-configured-header .workflow-results-edit-toggle {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .workflow-output-modal {
+    max-height: 100%;
+  }
+
+  .workflow-output-modal-header {
+    align-items: flex-start;
+  }
+
+  .workflow-output-modal-controls {
+    width: 100%;
+    justify-content: space-between;
+  }
+
   .workflow-result-expand-toggle {
     min-width: calc(var(--space-lg) * 2 + var(--space-xs));
     min-height: calc(var(--space-lg) * 2 + var(--space-xs));

packages/dashboard/app/components/WorkflowResultsTab.tsx

@@ -615,7 +615,7 @@ export function WorkflowResultsTab({
                 data-testid={`workflow-configured-step-${step.id}`}
               >
                 <div className="workflow-configured-name">
-                  {step.name}
+                  <span className="workflow-configured-name-text">{step.name}</span>
                   {phaseBadge(step.phase, step.id, "workflow-configured-phase")}
                 </div>
                 <p className="workflow-configured-description">{step.description}</p>

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

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, vi } from "vitest";
 import { render, screen, fireEvent, waitFor, within } from "@testing-library/react";
 import { WorkflowResultsTab } from "../WorkflowResultsTab";
 import { fetchWorkflowSteps } from "../../api";
-import { loadAllAppCssBaseOnly } from "../../test/cssFixture";
+import { loadAllAppCss, loadAllAppCssBaseOnly } from "../../test/cssFixture";
 import type { WorkflowStep, WorkflowStepResult } from "@fusion/core";
 
 vi.mock("../../api", () => ({
@@ -818,6 +818,24 @@ describe("WorkflowResultsTab", () => {
         expect(match?.[1] ?? "").not.toMatch(/#[0-9a-fA-F]{3,8}|rgba?\(/);
       }
     });
+
+    it("wraps configured workflow names and modal headers to prevent long-name overflow", () => {
+      const css = loadAllAppCssBaseOnly();
+
+      expect(css).toMatch(/\.workflow-configured-title-row\s*\{[^}]*flex-wrap:\s*wrap;[^}]*min-width:\s*0;/);
+      expect(css).toMatch(/\.workflow-configured-name\s*\{[^}]*flex-wrap:\s*wrap;[^}]*min-width:\s*0;/);
+      expect(css).toMatch(/\.workflow-configured-name-text\s*\{[^}]*min-width:\s*0;[^}]*overflow-wrap:\s*anywhere;/);
+      expect(css).toMatch(/\.workflow-output-modal-header\s*\{[^}]*flex-wrap:\s*wrap;/);
+      expect(css).toMatch(/\.workflow-output-modal-title\s*\{[^}]*flex-wrap:\s*wrap;[^}]*min-width:\s*0;/);
+      expect(css).toMatch(/\.workflow-output-modal-name\s*\{[^}]*min-width:\s*0;[^}]*overflow-wrap:\s*anywhere;/);
+    });
+
+    it("allows workflow modal controls to wrap on mobile so the close button stays visible", () => {
+      const css = loadAllAppCss();
+
+      expect(css).toMatch(/@media \(max-width: 768px\)\s*\{[\s\S]*?\.workflow-output-modal-controls\s*\{[^}]*width:\s*100%;[^}]*justify-content:\s*space-between;/);
+      expect(css).toMatch(/@media \(max-width: 768px\)\s*\{[\s\S]*?\.workflow-configured-header \.workflow-results-edit-toggle\s*\{[^}]*width:\s*100%;[^}]*justify-content:\s*center;/);
+    });
   });
 
   describe("expanded view modal", () => {