FN-7195: keep model names readable in token table

Keep Summary token-usage model labels readable in narrow task detail layouts.

- Add a desktop token table minimum width so right-dock layouts scroll instead of collapsing model labels.
- Restore normal model-name wrapping while preserving mobile stacked-card behavior.
- Cover the responsive CSS contract and add a patch changeset for the published package.

Files changed:
 .changeset/fn-7195-model-name-wrap.md                       |  7 +++++++
 packages/dashboard/app/components/TaskDetailModal.css       |  8 +++++++-
 .../__tests__/TaskDetailModal.summary-tab.test.tsx          | 13 ++++++++++++-
 3 files changed, 26 insertions(+), 2 deletions(-)

Fusion-Task-Id: FN-7195

Fusion-Task-Lineage: 97f972f6-ac6e-4632-86ed-b3184c7abbc2

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>

.changeset/fn-7195-model-name-wrap.md

@@ -0,0 +1,7 @@
+---
+"@runfusion/fusion": patch
+---
+
+summary: Keep Summary token table model names readable in narrow task detail panels.
+category: fix
+dev: Adds token-table CSS min-width and wrap-contract regression coverage for right-dock layouts.

packages/dashboard/app/components/TaskDetailModal.css

@@ -1645,6 +1645,9 @@ The done-task Summary tab is a scrollable overview composed from existing detail
 /*
 FNXC:TaskDetailSummaryTokenCost 2026-06-27-00:00:
 The done-task Summary token-cost section must reuse task-summary card hierarchy while showing per-model counts and cost without hardcoded colors or spacing. Mobile converts table rows to stacked cards so the modal and right dock do not trap horizontal scrolling.
+
+FNXC:TaskDetailSummaryTokenCost 2026-06-28-00:00:
+The desktop table needs a token-scale min-width and non-anywhere model-name wrapping so narrow right-dock containers scroll horizontally instead of collapsing MODEL values to one character per line.
 */
 .task-summary-token-table-wrap {
   width: 100%;
@@ -1653,6 +1656,7 @@ The done-task Summary token-cost section must reuse task-summary card hierarchy
 
 .task-summary-token-table {
   width: 100%;
+  min-width: calc(var(--space-2xl) * 16);
   border-collapse: collapse;
   color: var(--text);
 }
@@ -1693,7 +1697,8 @@ The done-task Summary token-cost section must reuse task-summary card hierarchy
 }
 
 .task-summary-model-label span:last-child {
-  overflow-wrap: anywhere;
+  overflow-wrap: normal;
+  word-break: normal;
 }
 
 .task-summary-cost-unavailable {
@@ -1801,6 +1806,7 @@ The done-task Summary token-cost section must reuse task-summary card hierarchy
   .task-summary-token-table th,
   .task-summary-token-table td {
     display: block;
+    min-width: 0;
   }
 
   .task-summary-token-table thead {

packages/dashboard/app/components/__tests__/TaskDetailModal.summary-tab.test.tsx

@@ -387,9 +387,20 @@ describe("TaskDetailModal Summary tab", () => {
 
   it("keeps token-cost summary styling responsive without hardcoded colors", () => {
     const css = readDashboardStylesSource();
+    const tokenTableRule = css.match(/\.task-summary-token-table\s*\{[^}]*\}/)?.[0] ?? "";
+    const modelNameRule = css.match(/\.task-summary-model-label span:last-child\s*\{[^}]*\}/)?.[0] ?? "";
+    const mobileTokenBlock = css.slice(css.indexOf("@media (max-width: 768px)"), css.indexOf("/* Spec tab layout"));
+
     expect(css).toContain(".task-summary-token-table");
+    expect(tokenTableRule).toMatch(/min-width:\s*calc\(var\(--space-2xl\)\s*\*\s*16\)/);
+    expect(modelNameRule).toContain("overflow-wrap: normal");
+    expect(modelNameRule).toContain("word-break: normal");
+    expect(modelNameRule).not.toContain("overflow-wrap: anywhere");
     expect(css).toContain("@media (max-width: 768px)");
-    expect(css).toContain(".task-summary-token-table td::before");
+    expect(mobileTokenBlock).toContain(".task-summary-token-table-wrap");
+    expect(mobileTokenBlock).toContain("overflow-x: visible");
+    expect(mobileTokenBlock).toContain(".task-summary-token-table td::before");
+    expect(mobileTokenBlock).toContain("min-width: 0");
     expect(css).toContain("var(--color-warning)");
     expect(css).not.toMatch(/task-summary-token[^{}]*#[0-9a-fA-F]{3,8}/);
   });