feat(FN-3367): fix Git Manager mobile changes overflow
- Add mobile-only Git Manager layout rules so changes lists and sections can shrink without horizontal page scrolling - Wrap section header actions and file rows at narrow widths while preserving readable file names and controls - Extend GitManagerModal CSS regression coverage for mobile wrapping selectors - Add core mobile modal test assertions for wrapped actions/rows and bounded section width - Add a patch changeset for @runfusion/fusion documenting the mobile overflow fix Fusion-Task-Id: FN-3367
This commit is contained in:
5
.changeset/fn-3367-git-manager-mobile-overflow.md
Normal file
5
.changeset/fn-3367-git-manager-mobile-overflow.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@runfusion/fusion": patch
|
||||
---
|
||||
|
||||
Fix Git Manager mobile Changes layout overflow so staged/unstaged file lists no longer force horizontal page scrolling. The changes panel now wraps section actions and file rows at narrow widths while preserving readable file names and usable controls.
|
||||
@@ -3350,6 +3350,60 @@
|
||||
/* ── Responsive ── */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.gm-changes-split {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.gm-changes-lists {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gm-file-section {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gm-file-section-header {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.gm-file-section-header h5 {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.gm-file-section-actions {
|
||||
flex: 1 1 100%;
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.gm-file-section-actions .btn {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.gm-file-item {
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
row-gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.gm-file-checkbox,
|
||||
.gm-file-icon,
|
||||
.gm-file-badge,
|
||||
.gm-file-item .gm-icon-btn {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.gm-file-name {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.gm-remotes-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@@ -2574,7 +2574,7 @@ describe("GitManagerModal", () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe("remotes CSS regression coverage", () => {
|
||||
describe("CSS regression coverage", () => {
|
||||
it("includes remotes layout selectors and mobile rules", () => {
|
||||
const css = loadAllAppCss();
|
||||
expect(css).toContain(".gm-remotes-layout");
|
||||
@@ -2592,5 +2592,13 @@ describe("GitManagerModal", () => {
|
||||
expect(remoteSection).not.toMatch(/rgba\(/i);
|
||||
expect(remoteSection).not.toMatch(/#[0-9a-f]{3,8}/i);
|
||||
});
|
||||
|
||||
it("includes mobile wrapping rules for changes file rows and section actions", () => {
|
||||
const css = loadAllAppCss();
|
||||
|
||||
expect(css).toMatch(/@media \(max-width: 768px\)\s*\{[\s\S]*?\.gm-file-section-actions\s*\{[\s\S]*?flex-wrap:\s*wrap;[\s\S]*?flex:\s*1 1 100%;/);
|
||||
expect(css).toMatch(/@media \(max-width: 768px\)\s*\{[\s\S]*?\.gm-file-item\s*\{[\s\S]*?min-width:\s*0;[\s\S]*?flex-wrap:\s*wrap;/);
|
||||
expect(css).toMatch(/@media \(max-width: 768px\)\s*\{[\s\S]*?\.gm-file-section\s*\{[\s\S]*?max-width:\s*100%;/);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -159,6 +159,25 @@ describe("core modals mobile css coverage", () => {
|
||||
expect(mobileBlock).toContain("overflow-y: auto;");
|
||||
});
|
||||
|
||||
it("GitManagerModal: changes rows/actions wrap without widening viewport on mobile", () => {
|
||||
const css = loadAllAppCss();
|
||||
const mobileBlock = getMainMobileBlock(css);
|
||||
|
||||
const actionsRule = mobileBlock.match(/\.gm-file-section-actions\s*\{[^}]+\}/s);
|
||||
expect(actionsRule).not.toBeNull();
|
||||
expect(actionsRule![0]).toContain("flex-wrap: wrap");
|
||||
expect(actionsRule![0]).toContain("flex: 1 1 100%");
|
||||
|
||||
const fileItemRule = mobileBlock.match(/\.gm-file-item\s*\{[^}]+\}/s);
|
||||
expect(fileItemRule).not.toBeNull();
|
||||
expect(fileItemRule![0]).toContain("flex-wrap: wrap");
|
||||
expect(fileItemRule![0]).toContain("min-width: 0");
|
||||
|
||||
const fileSectionRule = mobileBlock.match(/\.gm-file-section\s*\{[^}]+\}/s);
|
||||
expect(fileSectionRule).not.toBeNull();
|
||||
expect(fileSectionRule![0]).toContain("max-width: 100%");
|
||||
});
|
||||
|
||||
it("GitManagerModal: modal uses full-screen viewport sizing on mobile (641-768px range)", () => {
|
||||
const css = loadAllAppCss();
|
||||
const mobileBlock = getMainMobileBlock(css);
|
||||
|
||||
Reference in New Issue
Block a user