feat(FN-1464): merge fusion/fn-1464

.changeset/tighten-mobile-bottom-spacing.md

@@ -0,0 +1,11 @@
+---
+"@gsxdsm/fusion": patch
+---
+
+Tighten mobile bottom spacing between dashboard content and nav bar (FN-1464)
+
+- Introduced `--mobile-nav-height` CSS variable (44px) to unify mobile bottom-spacing contract
+- Reduced mobile nav bar footprint from 48px to 44px while preserving 36px touch targets
+- Updated executor status bar mobile positioning to use nav-height contract variable
+- Updated project content padding formulas to use unified nav-height variable
+- Updated CSS regression tests to match new spacing values

.fusion/memory.md

@@ -254,6 +254,16 @@ Tasks can get into contradictory states (e.g., `column: "done"` with `status: "b
 - Regex tests using `[\s\S]*` (greedy match across lines) to check CSS rules inside `@media` blocks are unreliable — they can match across block boundaries. Use non-greedy `[^}]*` scoped to a single rule block instead.
 - Touch target sizing in `styles.css` mobile media queries uses 36px (reduced from the original 44px). The `.touch-target` opt-in utility class remains at 44px. Comments mentioning "44px" in the mobile sections have been updated to reflect the actual values.
 
+## FN-1464: Mobile Bottom-Spacing Contract
+
+The mobile bottom-spacing is controlled by a single CSS variable `--mobile-nav-height` (defined at `:root`) to ensure consistent spacing across all bottom-positioned elements:
+- **`.mobile-nav-bar`**: Uses `min-height: var(--mobile-nav-height)` (currently 44px)
+- **`.executor-status-bar` mobile**: Uses `bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom))` to position above the nav bar
+- **`.project-content--with-mobile-nav`**: Uses `padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom))` to reserve nav space
+- **`.project-content--with-footer.project-content--with-mobile-nav`**: Uses `padding-bottom: calc(32px + var(--mobile-nav-height) + env(safe-area-inset-bottom))` to reserve footer + nav space
+
+When adjusting mobile bottom spacing, change `--mobile-nav-height` in one place and all related elements will update. Tab touch targets (`.mobile-nav-tab`) remain at 36px minimum regardless of nav height changes.
+
 ## FN-1458: Mobile Header Search Safe-Area-Inset Fix
 
 - When fixing mobile header search positioning issues (search box clipping off-screen), add safe-area-inset handling to both `.header` and `.header-floating-search` in the mobile media query

packages/dashboard/app/__tests__/footer-safe-layout.test.ts

@@ -124,10 +124,10 @@ describe("footer-safe project workspace layout", () => {
       );
     });
 
-    it("on mobile, positions above the mobile nav bar", () => {
+    it("on mobile, positions above the mobile nav bar using nav-height contract", () => {
       const mobileCss = extractMobileMediaBlocks(css);
       expect(mobileCss).toMatch(
-        /\.executor-status-bar\s*\{[^}]*bottom:\s*calc\(48px/,
+        /\.executor-status-bar\s*\{[^}]*bottom:\s*calc\(var\(--mobile-nav-height\)/,
       );
     });
 

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

@@ -65,8 +65,9 @@ describe("mobile-nav-bar.css", () => {
 
   it("executor status bar has bottom offset above nav bar on mobile", () => {
     // ExecutorStatusBar mobile override positions it above the mobile nav bar
+    // Uses --mobile-nav-height variable for consistent nav-height contract
     expect(mobileMediaBlock).toMatch(
-      /\.executor-status-bar\s*\{[^}]*bottom:\s*calc\(48px/,
+      /\.executor-status-bar\s*\{[^}]*bottom:\s*calc\(var\(--mobile-nav-height\)/,
     );
   });
 

packages/dashboard/app/styles.css

@@ -18709,7 +18709,7 @@ html .column.drag-over * {
     font-size: 11px;
     height: 32px;
     overflow: hidden;
-    bottom: calc(48px + env(safe-area-inset-bottom, 0px));
+    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
   }
 
   .executor-status-bar__segment {
@@ -25567,6 +25567,11 @@ html .column.drag-over * {
    Sits at the very bottom; ExecutorStatusBar appears above when visible.
    Uses safe-area-inset-bottom for notched devices. */
 
+/* Mobile nav height token - used by nav bar, executor status bar, and content padding */
+:root {
+  --mobile-nav-height: 44px;
+}
+
 .mobile-nav-bar {
   position: fixed;
   bottom: 0;
@@ -25577,7 +25582,7 @@ html .column.drag-over * {
   align-items: stretch;
   background: var(--surface);
   border-top: 1px solid var(--border);
-  min-height: 48px;
+  min-height: var(--mobile-nav-height);
   padding-bottom: env(safe-area-inset-bottom, 0px);
   box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
 }
@@ -25593,12 +25598,12 @@ html .column.drag-over * {
 
   /* Content padding: mobile nav only (no footer) */
   .project-content--with-mobile-nav:not(.project-content--with-footer) {
-    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
+    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
   }
 
   /* Content padding: both mobile nav AND footer */
   .project-content--with-footer.project-content--with-mobile-nav {
-    padding-bottom: calc(32px + 48px + env(safe-area-inset-bottom, 0px));
+    padding-bottom: calc(32px + var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
   }
 }