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) { @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 { .settings-modal .modal-header {
flex-wrap: wrap; flex-wrap: nowrap;
align-items: flex-start; align-items: center;
row-gap: var(--space-sm);
column-gap: var(--space-sm); column-gap: var(--space-sm);
} }
.settings-modal-heading { .settings-modal-heading {
flex: 1 1 0; flex: 1 1 0;
min-width: 0; min-width: 0;
order: 1;
} }
.settings-update-check { .settings-update-check {
@@ -46,19 +44,9 @@
row-gap: var(--space-xs); 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 { .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-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;"); 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 css = loadAllAppCss();
const mobileBlock = getMainMobileBlock(css); const mobileBlock = getMainMobileBlock(css);
expect(mobileBlock).toContain(".settings-modal .modal-header {"); expect(mobileBlock).toContain(".settings-modal .modal-header {");
expect(mobileBlock).toContain("flex-wrap: wrap;");
expect(mobileBlock).toContain(".settings-header-actions {"); expect(mobileBlock).toContain(".settings-header-actions {");
expect(mobileBlock).toContain("order: 3;"); expect(mobileBlock).toContain(".settings-modal-heading {");
expect(mobileBlock).toContain("flex: 1 1 100%;");
expect(mobileBlock).toContain("margin-left: 0;"); const headingRule = mobileBlock.match(/\.settings-modal-heading\s*\{[^}]*\}/s);
expect(mobileBlock).toContain(".settings-modal .modal-close {"); expect(headingRule).toBeTruthy();
expect(mobileBlock).toContain("order: 2;"); expect(headingRule![0]).toContain("flex: 1 1 0;");
expect(mobileBlock).toContain("min-width: calc(var(--space-md) * 3);"); expect(headingRule![0]).toContain("min-width: 0;");
expect(mobileBlock).toContain("min-height: calc(var(--space-md) * 3);"); });
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", () => { it("GitManagerModal: 768px mobile block includes stacked layout rules", () => {