From e7021857a9fa7767be1e4b63f372997a8b1cd2d8 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Wed, 24 Jun 2026 22:36:10 -0700 Subject: [PATCH] FN-6999: equalize mobile nav side spacing 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 --- .changeset/fn-6999-mobile-nav-side-spacing.md | 7 +++++++ .../dashboard/app/__tests__/mobile-nav-bar-css.test.ts | 10 ++++++++++ packages/dashboard/app/components/MobileNavBar.css | 5 +++++ .../app/components/__tests__/MobileNavBar.test.tsx | 8 ++++++++ 4 files changed, 30 insertions(+) create mode 100644 .changeset/fn-6999-mobile-nav-side-spacing.md diff --git a/.changeset/fn-6999-mobile-nav-side-spacing.md b/.changeset/fn-6999-mobile-nav-side-spacing.md new file mode 100644 index 0000000000..99324dd8ac --- /dev/null +++ b/.changeset/fn-6999-mobile-nav-side-spacing.md @@ -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. diff --git a/packages/dashboard/app/__tests__/mobile-nav-bar-css.test.ts b/packages/dashboard/app/__tests__/mobile-nav-bar-css.test.ts index e5fb3d404d..0d9f6b3cbc 100644 --- a/packages/dashboard/app/__tests__/mobile-nav-bar-css.test.ts +++ b/packages/dashboard/app/__tests__/mobile-nav-bar-css.test.ts @@ -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"); diff --git a/packages/dashboard/app/components/MobileNavBar.css b/packages/dashboard/app/components/MobileNavBar.css index 450095592a..68ab6b80ac 100644 --- a/packages/dashboard/app/components/MobileNavBar.css +++ b/packages/dashboard/app/components/MobileNavBar.css @@ -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. */ diff --git a/packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx b/packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx index 5d454d927e..464da31f46 100644 --- a/packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx +++ b/packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx @@ -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");