FN-5711: stack mission list items and actions on mobile
Improve the mission manager mobile stacked layout so mission rows reflow cleanly. - make stacked mission list items switch to column layout with stretched content on mobile - make stacked mission item actions full-width and wrapping instead of cramped inline controls - make stacked mission run controls span full width - add mobile CSS regression assertions for stacked-body mission cards and action controls Files changed: packages/dashboard/app/components/MissionManager.css | 16 ++++++++++++++++ packages/dashboard/app/components/__tests__/MissionManager.mobile-css.test.ts | 13 +++++++++++++ 2 files changed, 29 insertions(+) Fusion-Task-Id: FN-5711 Fusion-Task-Lineage: 76a20899-89fe-4aa9-8871-6b64c2521a0b
This commit is contained in:
@@ -2546,6 +2546,22 @@
|
|||||||
padding: var(--space-md);
|
padding: var(--space-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mission-manager__body--stacked .mission-list__item {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-manager__body--stacked .mission-list__item-actions {
|
||||||
|
width: 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-manager__body--stacked .mission-list__item-run-controls {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.mission-manager__body--stacked .mission-list__item-description,
|
.mission-manager__body--stacked .mission-list__item-description,
|
||||||
.mission-manager__body--stacked .mission-list__item-description .markdown-body {
|
.mission-manager__body--stacked .mission-list__item-description .markdown-body {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
|
|||||||
@@ -51,6 +51,19 @@ describe("MissionManager mobile styles", () => {
|
|||||||
expect(section).toContain("-webkit-line-clamp: 2;");
|
expect(section).toContain("-webkit-line-clamp: 2;");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("stacks stacked-body mission cards and actions on mobile", () => {
|
||||||
|
const css = loadAllAppCss();
|
||||||
|
const section = getMissionMobileSection(css);
|
||||||
|
|
||||||
|
expect(section).toContain(".mission-manager__body--stacked .mission-list__item {");
|
||||||
|
expect(section).toContain("flex-direction: column;");
|
||||||
|
expect(section).toContain("align-items: stretch;");
|
||||||
|
expect(section).toContain(".mission-manager__body--stacked .mission-list__item-actions {");
|
||||||
|
expect(section).toContain("width: 100%;");
|
||||||
|
expect(section).toContain("flex-wrap: wrap;");
|
||||||
|
expect(section).toContain(".mission-manager__body--stacked .mission-list__item-run-controls {");
|
||||||
|
});
|
||||||
|
|
||||||
it("keeps mission detail mobile bottom padding content-only (no shared nav duplication)", () => {
|
it("keeps mission detail mobile bottom padding content-only (no shared nav duplication)", () => {
|
||||||
const css = loadAllAppCss();
|
const css = loadAllAppCss();
|
||||||
const section = getMissionMobileSection(css);
|
const section = getMissionMobileSection(css);
|
||||||
|
|||||||
Reference in New Issue
Block a user