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:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user