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");
});
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", () => {
const block = extractRuleBlock(cssContent, ".mobile-nav-bar");
expect(block).toContain("z-index: 45");

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

@@ -28,6 +28,11 @@
*/
border-top: none;
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
the indicator (PWA standalone) and the bar meets the executor status bar
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);
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");
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");