From 6f35c1464ed74971579a2efdc13ae43c35154b79 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Sat, 20 Jun 2026 21:44:18 -0700 Subject: [PATCH] FN-6809: fix dashboard nav CSS tokens Align dashboard navigation styling and tests with defined spacing and status tokens. - Replace undefined sidebar CSS tokens with defined dashboard values while preserving circular and todo-active styling. - Update the mobile nav touch-target test to assert the tokenized 36px minimum height. - Add FNXC comments documenting the token requirements behind the fixes. Files changed: packages/dashboard/app/__tests__/mobile-nav-bar-css.test.ts | 3 ++- packages/dashboard/app/components/LeftSidebarNav.css | 12 ++++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) Fusion-Task-Id: FN-6809 Fusion-Task-Lineage: 43ddb9cb-5ead-4289-9254-6c0fa5c3af40 --- .../app/__tests__/mobile-nav-bar-css.test.ts | 3 ++- packages/dashboard/app/components/LeftSidebarNav.css | 12 ++++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) 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 998b1fe851..e5fb3d404d 100644 --- a/packages/dashboard/app/__tests__/mobile-nav-bar-css.test.ts +++ b/packages/dashboard/app/__tests__/mobile-nav-bar-css.test.ts @@ -52,7 +52,8 @@ describe("mobile-nav-bar.css", () => { it("tab touch targets are at least 36px", () => { const block = extractRuleBlock(cssContent, ".mobile-nav-tab"); - expect(block).toContain("min-height: 36px"); + // FNXC:DashboardStyling 2026-06-20-20:56: FN-6809 keeps the 36px touch-target intent via tokens; --space-xl (24px) + --space-md (12px) resolves to the same min-height. + expect(block).toContain("min-height: calc(var(--space-xl) + var(--space-md))"); }); it("footer-aware positioning keeps nav at bottom: 0 when footer is visible", () => { diff --git a/packages/dashboard/app/components/LeftSidebarNav.css b/packages/dashboard/app/components/LeftSidebarNav.css index 064dd9f7d8..7ac57061ec 100644 --- a/packages/dashboard/app/components/LeftSidebarNav.css +++ b/packages/dashboard/app/components/LeftSidebarNav.css @@ -29,6 +29,10 @@ The left sidebar is a sibling of project-content, so it does not inherit project flex-shrink: 0; } +/* +FNXC:DashboardStyling 2026-06-20-20:56: +The floating sidebar collapse toggle must stay fully round, but FN-6809 surfaced that --radius-full is not a defined dashboard token. Use 50% here to preserve the circular affordance without introducing another undefined custom property. +*/ .left-sidebar-nav__collapse-toggle--floating { position: absolute; top: var(--space-sm); @@ -40,7 +44,7 @@ The left sidebar is a sibling of project-content, so it does not inherit project min-width: calc(var(--space-lg) + var(--space-md)); min-height: calc(var(--space-lg) + var(--space-md)); padding: var(--space-xs); - border-radius: var(--radius-full); + border-radius: 50%; box-shadow: var(--shadow-sm); } @@ -96,8 +100,12 @@ The left sidebar is a sibling of project-content, so it does not inherit project box-shadow: var(--focus-ring); } +/* +FNXC:DashboardStyling 2026-06-20-20:56: +The active sidebar item must use the defined --status-todo-bg token so the dashboard CSS token-validity gate stays green. FN-6809 replaces the undefined --todo-bg reference without changing the rendered todo status treatment. +*/ .left-sidebar-nav__item--active { - background: var(--todo-bg); + background: var(--status-todo-bg); color: var(--todo); }