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

FN-6999: equalize mobile nav side spacing

Browse Source 
Mobile bottom navigation now keeps balanced horizontal spacing without disturbing existing viewport compensation.\n\n- Add tokenized inline padding to the fixed mobile nav bar while preserving ICB and safe-area behavior.\n- Cover symmetric side spacing in mobile nav CSS and component layout tests.\n- Add a patch changeset for the published CLI package.\n\nFiles changed:\n .changeset/fn-6999-mobile-nav-side-spacing.md                  |  7 +++++++\n packages/dashboard/app/__tests__/mobile-nav-bar-css.test.ts    | 10 ++++++++++\n packages/dashboard/app/components/MobileNavBar.css             |  5 +++++\n .../dashboard/app/components/__tests__/MobileNavBar.test.tsx   |  8 ++++++++\n 4 files changed, 30 insertions(+)

Fusion-Task-Id: FN-6999

Fusion-Task-Lineage: 91bd2174-8e5d-4227-a035-ff621e309719
This commit is contained in:
gsxdsm
2026-06-24 22:36:10 -07:00
parent e473ba68fb
commit e7021857a9
4 changed files with 30 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/fn-6999-mobile-nav-side-spacing.md Normal file
View File

@@ -0,0 +1,7 @@
---
"@runfusion/fusion": patch
---
summary: Equalize mobile bottom navigation side spacing.
category: fix
dev: Adds tokenized MobileNavBar horizontal padding while preserving ICB and safe-area behavior.

10
packages/dashboard/app/__tests__/mobile-nav-bar-css.test.ts
View File

@@ -80,6 +80,16 @@ describe("mobile-nav-bar.css", () => {
expect(cssContent).toContain("env(safe-area-inset-bottom"); expect(cssContent).toContain("env(safe-area-inset-bottom");
}); });
it("tab bar keeps symmetric tokenized side spacing while preserving ICB compensation", () => {
const block = extractRuleBlock(cssContent, ".mobile-nav-bar");
expect(block).toContain("left: 0");
expect(block).toContain("right: var(--icb-right-offset, 0px)");
expect(block).toContain("padding-inline: var(--space-sm)");
expect(block).toMatch(/padding-inline:\s*var\(--space-[^)]+\)/);
expect(block).not.toMatch(/padding-left:\s*(?!0[;\s])/);
expect(block).not.toMatch(/padding-right:\s*(?!0[;\s])/);
});
it("tab bar includes z-index", () => { it("tab bar includes z-index", () => {
const block = extractRuleBlock(cssContent, ".mobile-nav-bar"); const block = extractRuleBlock(cssContent, ".mobile-nav-bar");
expect(block).toContain("z-index: 45"); expect(block).toContain("z-index: 45");

5
packages/dashboard/app/components/MobileNavBar.css
View File

@@ -28,6 +28,11 @@
*/ */
border-top: none; border-top: none;
min-height: var(--mobile-nav-height); min-height: var(--mobile-nav-height);
/*
FNXC:MobileNav 2026-06-24-22:27:
The mobile bottom nav must use symmetric outer side spacing while keeping its fixed right edge compensated by --icb-right-offset, equal-width tab columns, and safe-area bottom padding intact.
*/
padding-inline: var(--space-sm);
/* Extend the bar's surface into the iOS home-indicator area so icons sit above /* Extend the bar's surface into the iOS home-indicator area so icons sit above
the indicator (PWA standalone) and the bar meets the executor status bar the indicator (PWA standalone) and the bar meets the executor status bar
flush — its `bottom` already adds these same terms. */ flush — its `bottom` already adds these same terms. */

8
packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx
View File

@@ -44,6 +44,14 @@ function expectUniformMobileNavColumns(container: HTMLElement, expectedTabCount:
const tabs = getRenderedMobileTabs(container); const tabs = getRenderedMobileTabs(container);
expect(tabs).toHaveLength(expectedTabCount); expect(tabs).toHaveLength(expectedTabCount);
const navRule = extractRuleBlock(mobileNavCss, ".mobile-nav-bar");
expect(navRule).toContain("left: 0");
expect(navRule).toContain("right: var(--icb-right-offset, 0px)");
expect(navRule).toContain("padding-inline: var(--space-sm)");
expect(navRule).toMatch(/padding-inline:\s*var\(--space-[^)]+\)/);
expect(navRule).not.toMatch(/padding-left:\s*(?!0[;\s])/);
expect(navRule).not.toMatch(/padding-right:\s*(?!0[;\s])/);
const tabRule = extractRuleBlock(mobileNavCss, ".mobile-nav-tab"); const tabRule = extractRuleBlock(mobileNavCss, ".mobile-nav-tab");
expect(tabRule).toContain("--mobile-nav-icon-size: calc(var(--space-lg) + var(--space-sm) - (var(--space-xs) / 2))"); expect(tabRule).toContain("--mobile-nav-icon-size: calc(var(--space-lg) + var(--space-sm) - (var(--space-xs) / 2))");
expect(tabRule).toContain("flex: 1 1 0"); expect(tabRule).toContain("flex: 1 1 0");