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

FN-5711: stack mission list items and actions on mobile

Browse Source 
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:
gsxdsm
2026-05-30 00:10:23 -07:00
parent 45d22586dc
commit 0957a91bdd
2 changed files with 29 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/dashboard/app/components/__tests__/MissionManager.mobile-css.test.ts
View File

@@ -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);