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);
|
||||
}
|
||||
|
||||
.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 .markdown-body {
|
||||
display: -webkit-box;
|
||||
|
||||
@@ -51,6 +51,19 @@ describe("MissionManager mobile styles", () => {
|
||||
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)", () => {
|
||||
const css = loadAllAppCss();
|
||||
const section = getMissionMobileSection(css);
|
||||
|
||||
Reference in New Issue
Block a user