From 98863026b789d09eecb0bc3e013d112889a5d038 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Tue, 4 Nov 2025 19:11:42 -0600
Subject: [PATCH] refactor(layout): make nav height truly self-referential
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improvements to the fixed nav spacing system:

1. Define nav heights as CSS variables in :root (globals.css):
   - --app-nav-height-full: 72px
   - --app-nav-height-minimal: 92px

2. Nav components reference and use these variables:
   - Set --app-nav-height to the appropriate variant
   - Use min-height based on the variable (circular reference)

3. Changed PageWithNav from padding to margin:
   - Prevents background gap under nav
   - Backgrounds now properly extend under the fixed nav

Single source of truth: Change values in globals.css and everything
updates automatically - both the nav sizing and the content spacing.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/globals.css            |  7 +++++++
 apps/web/src/components/AppNavBar.tsx   | 12 ++++++++----
 apps/web/src/components/PageWithNav.tsx |  2 +-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 28f5380c..62552942 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -3,6 +3,13 @@
 /* Import Panda CSS generated styles */
 @import "../../styled-system/styles.css";
 
+/* Layout variables */
+:root {
+  /* Navigation bar heights - used by both the nav itself and content padding */
+  --app-nav-height-full: 72px;
+  --app-nav-height-minimal: 92px;
+}
+
 /* Custom global styles */
 body {
   font-family:
diff --git a/apps/web/src/components/AppNavBar.tsx b/apps/web/src/components/AppNavBar.tsx
index c71636ac..35d4131c 100644
--- a/apps/web/src/components/AppNavBar.tsx
+++ b/apps/web/src/components/AppNavBar.tsx
@@ -495,8 +495,10 @@ function MinimalNav({
         justifyContent: 'center',
         alignItems: 'flex-start',
         pointerEvents: 'none',
-        // Set CSS variable for minimal nav height (top offset + approx button height)
-        ['--app-nav-height' as any]: '92px',
+        // Set active nav height for content to use
+        ['--app-nav-height' as any]: 'var(--app-nav-height-minimal)',
+        // Use the variable for min-height to ensure consistency
+        minHeight: 'var(--app-nav-height-minimal)',
       }}
     >
       {/* Hamburger Menu - positioned absolutely on left */}
@@ -610,8 +612,10 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
     <Tooltip.Provider delayDuration={200}>
       <header
         style={{
-          // Set CSS variable for full nav height
-          ['--app-nav-height' as any]: '72px',
+          // Set active nav height for content to use
+          ['--app-nav-height' as any]: 'var(--app-nav-height-full)',
+          // Use the variable for min-height to ensure consistency
+          minHeight: 'var(--app-nav-height-full)',
         }}
         className={css({
           bg: isTransparent ? 'transparent' : 'rgba(0, 0, 0, 0.5)',
diff --git a/apps/web/src/components/PageWithNav.tsx b/apps/web/src/components/PageWithNav.tsx
index b5fcf479..eccf0438 100644
--- a/apps/web/src/components/PageWithNav.tsx
+++ b/apps/web/src/components/PageWithNav.tsx
@@ -215,7 +215,7 @@ export function PageWithNav({
       <AppNavBar navSlot={navContent} />
       <div
         style={{
-          paddingTop: 'var(--app-nav-height, 80px)',
+          marginTop: 'var(--app-nav-height, 80px)',
         }}
       >
         {children}