FN-5701: clamp mobile mission list descriptions

Prevent mission list descriptions from overflowing the stacked mobile layout and displacing adjacent controls.

- add a stacked-mobile MissionManager CSS rule that clamps mission description text to two lines
- apply the clamp to both the description container and nested markdown body content to preserve truncation behavior
- add a mobile CSS regression test that asserts the new clamp selectors and properties are present

Files changed:
 packages/dashboard/app/components/MissionManager.css             | 9 +++++++++
 .../app/components/__tests__/MissionManager.mobile-css.test.ts   | 9 +++++++++
 2 files changed, 18 insertions(+)

Fusion-Task-Id: FN-5701

Fusion-Task-Lineage: b5f97fd3-7c9b-4c47-9165-0db3cf66c20f
This commit is contained in:
gsxdsm
2026-05-29 15:42:11 -07:00
parent 0605d13ab5
commit 91f568a9b0
2 changed files with 18 additions and 0 deletions

View File

@@ -2490,6 +2490,15 @@
padding: var(--space-md);
}
.mission-manager__body--stacked .mission-list__item-description,
.mission-manager__body--stacked .mission-list__item-description .markdown-body {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space: normal;
overflow: hidden;
}
.mission-list__drafts-header {
flex-wrap: wrap;
}

View File

@@ -42,6 +42,15 @@ describe("MissionManager mobile styles", () => {
expect(section).toContain("word-break: break-word;");
});
it("clamps stacked mission list descriptions on mobile", () => {
const css = loadAllAppCss();
const section = getMissionMobileSection(css);
expect(section).toContain(".mission-manager__body--stacked .mission-list__item-description,");
expect(section).toContain("display: -webkit-box;");
expect(section).toContain("-webkit-line-clamp: 2;");
});
it("keeps mission detail mobile bottom padding content-only (no shared nav duplication)", () => {
const css = loadAllAppCss();
const section = getMissionMobileSection(css);