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

feat(FN-4375): consolidate mobile settings modal into single-row header lay

Browse Source 
Completes the mobile settings header refactor by consolidating the header into a single row on small viewports, trimming CSS complexity with test coverage for the responsive layout contract.

Fusion-Task-Id: FN-4375
This commit is contained in:
Fusion
2026-05-13 15:24:14 -07:00
committed by gsxdsm
parent 94f45c32a7
commit 1e4d146b41
3 changed files with 30 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/fn-4375-settings-modal-single-row-header.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@runfusion/fusion": patch
---
SettingsModal mobile header: keep the GitHub Star, Help, "Settings" title, and close (×) controls on a single row at ≤768px instead of wrapping the action buttons to their own row.

20
packages/dashboard/app/components/SettingsModal.css
View File

@@ -27,18 +27,16 @@
}
@media (max-width: 768px) {
/* FN-4281: let Settings header content reflow so close button stays visible on narrow phones. */
/* FN-4375: keep heading, actions, and close in one row on mobile; supersedes FN-4281/FN-4331/FN-4363 wrap/order behavior. */
.settings-modal .modal-header {
flex-wrap: wrap;
align-items: flex-start;
row-gap: var(--space-sm);
flex-wrap: nowrap;
align-items: center;
column-gap: var(--space-sm);
}
.settings-modal-heading {
flex: 1 1 0;
min-width: 0;
order: 1;
}
.settings-update-check {
@@ -46,19 +44,9 @@
row-gap: var(--space-xs);
}
/* FN-4354: settings header actions inherit desktop sizing on mobile per user direction (revert of FN-3782/FN-3913/FN-4281 touch-target inflation). Layout reflow (flex-wrap on .modal-header, flex: 1 1 100% on .settings-header-actions) is retained. */
.settings-header-actions {
flex: 1 1 100%;
justify-content: flex-start;
margin-left: 0;
margin-right: 0;
}
.settings-modal .modal-close {
order: 2;
flex: 0 0 auto;
align-self: flex-start;
margin-left: auto;
margin-right: var(--space-sm);
}
}

30
packages/dashboard/app/components/__tests__/core-modals-mobile.test.tsx
View File

@@ -133,20 +133,32 @@ describe("core modals mobile css coverage", () => {
expect(mobileBlock).toContain("gap: 4px;");
});
it("FN-4281: SettingsModal header reflows and keeps close button touch target on mobile", () => {
it("FN-4281: SettingsModal header keeps mobile heading shrink-to-fit scaffolding", () => {
const css = loadAllAppCss();
const mobileBlock = getMainMobileBlock(css);
expect(mobileBlock).toContain(".settings-modal .modal-header {");
expect(mobileBlock).toContain("flex-wrap: wrap;");
expect(mobileBlock).toContain(".settings-header-actions {");
expect(mobileBlock).toContain("order: 3;");
expect(mobileBlock).toContain("flex: 1 1 100%;");
expect(mobileBlock).toContain("margin-left: 0;");
expect(mobileBlock).toContain(".settings-modal .modal-close {");
expect(mobileBlock).toContain("order: 2;");
expect(mobileBlock).toContain("min-width: calc(var(--space-md) * 3);");
expect(mobileBlock).toContain("min-height: calc(var(--space-md) * 3);");
expect(mobileBlock).toContain(".settings-modal-heading {");
const headingRule = mobileBlock.match(/\.settings-modal-heading\s*\{[^}]*\}/s);
expect(headingRule).toBeTruthy();
expect(headingRule![0]).toContain("flex: 1 1 0;");
expect(headingRule![0]).toContain("min-width: 0;");
});
it("FN-4375: SettingsModal header keeps GitHub/Help/title/close on one row at ≤768px", () => {
const css = loadAllAppCss();
const mobileBlock = getMainMobileBlock(css);
const headerRule = mobileBlock.match(/\.settings-modal \.modal-header\s*\{[^}]*\}/s);
expect(headerRule).toBeTruthy();
expect(headerRule![0]).not.toContain("flex-wrap: wrap;");
const actionsRule = mobileBlock.match(/\.settings-header-actions\s*\{[^}]*\}/s);
expect(actionsRule).toBeTruthy();
expect(actionsRule![0]).not.toContain("flex: 1 1 100%;");
expect(actionsRule![0]).toContain("margin-left: auto;");
});
it("GitManagerModal: 768px mobile block includes stacked layout rules", () => {