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

feat(FN-4081): keep mobile timestamps inline in task detail modal

Browse Source 
FN-4081 keeps task detail timestamps inline on mobile (no collapsible "more" row), with accompanying docs updates and a changeset for `@runfusion/fusion`. A test contract was updated to match the responsive layout change.

Fusion-Task-Id: FN-4081
This commit is contained in:
Fusion
2026-05-11 23:48:44 -07:00
committed by gsxdsm
parent e3904786ac
commit 9c80988e29
5 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/dashboard/app/components/TaskDetailModal.css
View File

@@ -186,17 +186,13 @@
.detail-timestamps {
display: flex;
align-items: flex-start;
flex-direction: column;
align-items: center;
flex-wrap: nowrap;
}
.detail-timestamp-item {
align-items: flex-start;
flex-wrap: wrap;
}
.detail-timestamp-separator {
display: none;
align-items: baseline;
flex-wrap: nowrap;
}
}

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

@@ -28,15 +28,17 @@ describe("TaskDetailModal", () => {
expect(css).not.toMatch(/@media \(max-width: 640px\)\s*\{[^}]*\.detail-meta-inline-controls\s*\{[^}]*flex-direction:\s*column;/);
});
it("uses grouped timestamp metadata on desktop with mobile stacked overrides", () => {
it("keeps grouped timestamp metadata inline on desktop and mobile", () => {
const css = readDashboardStylesSource();
expectBaseRule(css, ".detail-timestamps", "display: inline-flex;");
expectBaseRule(css, ".detail-timestamps", "flex-wrap: nowrap;");
expectBaseRule(css, ".detail-timestamp-item", "display: inline-flex;");
expectBaseRule(css, ".detail-timestamp-separator", "color: var(--text-dim);");
expect(css).toMatch(/@media \(max-width: 768px\)\s*\{\s*\.detail-provenance\s*\{[^}]*\}\s*\.detail-timestamps\s*\{[^}]*flex-direction:\s*column;/);
expect(css).toMatch(/@media \(max-width: 768px\)\s*\{[\s\S]*?\.detail-timestamp-separator\s*\{[^}]*display:\s*none;/);
expect(css).toMatch(/@media \(max-width: 768px\)\s*\{\s*\.detail-provenance\s*\{[^}]*\}\s*\.detail-timestamps\s*\{[^}]*align-items:\s*center;[^}]*flex-wrap:\s*nowrap;/);
expect(css).not.toMatch(/@media \(max-width: 768px\)\s*\{[\s\S]*?\.detail-timestamps\s*\{[^}]*flex-direction:\s*column;/);
expect(css).not.toMatch(/@media \(max-width: 768px\)\s*\{[\s\S]*?\.detail-timestamp-separator\s*\{[^}]*display:\s*none;/);
});
it("renders responsive structural classes (modal-lg, overlay, spacer, tabs, detail-body)", () => {
const { container } = render(