root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-4209): add responsive header to WorkflowResultsTab

Browse Source 
Completes the responsive header implementation for the WorkflowResultsTab component, adding mobile-aware styling in the co-located CSS module alongside test coverage for the responsive behavior.

Fusion-Task-Id: FN-4209
This commit is contained in:
Fusion
2026-05-13 04:22:18 -07:00
committed by gsxdsm
parent 7d12b9e406
commit bce26c6d44
2 changed files with 41 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/dashboard/app/components/WorkflowResultsTab.css
View File

@@ -294,6 +294,7 @@
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-xs);
min-width: 0;
}
.workflow-result-toggle {
@@ -305,8 +306,10 @@
}
.workflow-result-output-preview {
flex: 1 1 calc(var(--space-2xl) * 6);
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
color: var(--text-dim);
font-style: italic;
@@ -314,6 +317,7 @@
.workflow-result-mode-toggle {
margin-left: auto;
flex-shrink: 0;
}
.workflow-result-expand-toggle {
@@ -510,12 +514,19 @@
}
.workflow-result-output-preview {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
flex-basis: 100%;
order: 3;
}
.workflow-result-mode-toggle {
margin-left: 0;
min-width: calc(var(--space-lg) * 2 + var(--space-xs));
min-height: calc(var(--space-lg) * 2 + var(--space-xs));
}

31
packages/dashboard/app/components/__tests__/WorkflowResultsTab.test.tsx
View File

@@ -510,6 +510,32 @@ describe("WorkflowResultsTab", () => {
expect(screen.getByTestId("workflow-result-mode-toggle-WS-002")).toHaveTextContent("Markdown");
});
it("FN-4209: header wraps when preview content is long", () => {
const longToken = "X".repeat(520);
const longOutputResults: WorkflowStepResult[] = [
{
...mockResults[0],
output: `Preview ${longToken}`,
},
];
render(<WorkflowResultsTab taskId="FN-001" results={longOutputResults} />);
const outputHeader = document.querySelector(".workflow-result-output-header");
expect(outputHeader).not.toBeNull();
if (!outputHeader) {
return;
}
expect(getComputedStyle(outputHeader).flexWrap).toBe("wrap");
const preview = outputHeader.querySelector(".workflow-result-output-preview");
expect(preview).not.toBeNull();
const outputToggle = screen.getByTestId("workflow-result-toggle-WS-001");
expect(outputToggle).toBeInTheDocument();
});
it("does not show mode toggle when output is collapsed", () => {
render(<WorkflowResultsTab taskId="FN-001" results={mockResults} />);
@@ -879,9 +905,10 @@ describe("WorkflowResultsTab", () => {
expect(baseCss).toMatch(/\.phase-badge\s*\{[^}]*font-size:\s*calc\(var\(--space-sm\) \+ var\(--space-xs\) \* 0\.75\);/);
expect(baseCss).toMatch(/\.workflow-result-output-header\s*\{[^}]*flex-wrap:\s*wrap;/);
expect(baseCss).toMatch(/\.workflow-result-output-preview\s*\{[^}]*flex:\s*1 1 calc\(var\(--space-2xl\) \* 6\);[^}]*min-width:\s*0;/);
expect(baseCss).toMatch(/\.workflow-result-output-preview\s*\{[^}]*flex:\s*1 1 auto;[^}]*min-width:\s*0;[^}]*overflow-wrap:\s*anywhere;/);
expect(allCss).toMatch(/@media \(max-width: 768px\)\s*\{[\s\S]*?\.workflow-result-output-preview\s*\{[^}]*flex-basis:\s*100%;[^}]*order:\s*3;/);
expect(allCss).toMatch(/@media \(max-width: 768px\)\s*\{[\s\S]*?\.workflow-result-mode-toggle\s*\{[^}]*margin-left:\s*0;/);
expect(baseCss).toMatch(/\.workflow-result-mode-toggle\s*\{[^}]*margin-left:\s*auto;[^}]*flex-shrink:\s*0;/);
expect(allCss).toMatch(/@media \(max-width: 768px\)\s*\{[\s\S]*?\.workflow-result-mode-toggle\s*\{[^}]*margin-left:\s*0;[^}]*min-width:\s*calc\(var\(--space-lg\) \* 2 \+ var\(--space-xs\)\);[^}]*min-height:\s*calc\(var\(--space-lg\) \* 2 \+ var\(--space-xs\)\);/);
});