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

FN-6857: restore mobile Git toolbar horizontal scrolling

Browse Source 
Restores touch-friendly horizontal scrolling for the Git Manager mobile section toolbar.

- Opt the Git Manager mobile sidebar back into horizontal touch panning and momentum scrolling.
- Prevent Git Manager mobile nav items from shrinking so every section remains reachable.
- Add mobile CSS coverage for the Git Manager toolbar scroll contract.

Files changed:
 packages/dashboard/app/components/ScriptsModal.css    | 12 ++++++++++++
 .../components/__tests__/core-modals-mobile.test.tsx  | 19 +++++++++++++++++++
 2 files changed, 31 insertions(+)

Fusion-Task-Id: FN-6857

Fusion-Task-Lineage: 8967bdd2-e830-4f2d-8cde-c96ccc80d67a
This commit is contained in:
gsxdsm
2026-06-21 12:27:01 -07:00
parent d57538581d
commit 21a7416614
2 changed files with 31 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/dashboard/app/components/ScriptsModal.css
View File

@@ -3751,6 +3751,11 @@ Non-Command-Center dashboard CSS must use the canonical --text token. The legacy
flex-direction: column;
}
/*
FNXC:GitManager 2026-06-21-11:27:
The mobile global `* { touch-action: pan-y; }` lock from FN-6365 blocks horizontal swipes unless the actual overflowing scroller opts back into pan-x.
The Git Manager section toolbar must keep all fixed section tabs reachable on touch viewports, so mirror the FN-6450 tab-strip treatment and prevent tab compression (FN-6857).
*/
.gm-sidebar {
flex-direction: row;
width: 100%;
@@ -3758,11 +3763,15 @@ Non-Command-Center dashboard CSS must use the canonical --text token. The legacy
border-right: none;
border-bottom: 1px solid var(--border);
overflow-x: auto;
touch-action: pan-x pan-y;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
padding: var(--space-xs) var(--space-sm);
gap: var(--space-xs);
}
.gm-nav-item {
flex: 0 0 auto;
flex-direction: column;
gap: calc(var(--space-xs) / 2);
padding: var(--space-xs) var(--space-sm);
@@ -4209,12 +4218,15 @@ Non-Command-Center dashboard CSS must use the canonical --text token. The legacy
border-right: none;
border-bottom: 1px solid var(--border);
overflow-x: auto;
touch-action: pan-x pan-y;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
padding: var(--space-xs) var(--space-sm);
gap: var(--space-xs);
}
.gm-nav-item {
flex: 0 0 auto;
border-left: none;
border-bottom: 2px solid transparent;
text-align: center;

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

@@ -236,6 +236,25 @@ describe("core modals mobile css coverage", () => {
expect(mobileBlock).toContain("flex-direction: row;");
});
it("GitManagerModal: mobile section toolbar opts back into horizontal touch scrolling", () => {
const css = loadAllAppCss();
const mobileBlock = getMainMobileBlock(css);
const sidebarRules = getRuleBlocks(mobileBlock, ".gm-sidebar");
expect(sidebarRules.length).toBeGreaterThan(0);
for (const sidebarRule of sidebarRules) {
expect(sidebarRule).toContain("overflow-x: auto;");
expect(sidebarRule).toContain("touch-action: pan-x pan-y;");
expect(sidebarRule).toContain("-webkit-overflow-scrolling: touch;");
}
const navItemRules = getRuleBlocks(mobileBlock, ".gm-nav-item");
expect(navItemRules.length).toBeGreaterThan(0);
for (const navItemRule of navItemRules) {
expect(navItemRule).toMatch(/flex:\s*0 0 auto;|flex-shrink:\s*0;/);
}
});
it("GitManagerModal: nav items keep 36px touch target on mobile", () => {
const css = loadAllAppCss();
const mobileBlock = getMainMobileBlock(css);