From 4559fb121d0df954ebaf33616a5262c7ca633c6e Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Tue, 4 Nov 2025 18:58:04 -0600
Subject: [PATCH] fix(layout): add systematic spacing for fixed nav bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prevent content from appearing underneath the fixed navigation by:
- Adding content wrapper in PageWithNav with top padding
- Using CSS variable --app-nav-height set by AppNavBar itself
- Different heights for full nav (72px) vs minimal nav (92px)

This systematically solves the fixed nav overlap issue for all pages
using PageWithNav without requiring per-page adjustments.

Fixes: Calendar creator title showing under nav

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/components/AppNavBar.tsx   | 6 ++++++
 apps/web/src/components/PageWithNav.tsx | 8 +++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/AppNavBar.tsx b/apps/web/src/components/AppNavBar.tsx
index 81d5d0fe..c71636ac 100644
--- a/apps/web/src/components/AppNavBar.tsx
+++ b/apps/web/src/components/AppNavBar.tsx
@@ -495,6 +495,8 @@ 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',
       }}
     >
       {/* Hamburger Menu - positioned absolutely on left */}
@@ -607,6 +609,10 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
   return (
     <Tooltip.Provider delayDuration={200}>
       <header
+        style={{
+          // Set CSS variable for full nav height
+          ['--app-nav-height' as any]: '72px',
+        }}
         className={css({
           bg: isTransparent ? 'transparent' : 'rgba(0, 0, 0, 0.5)',
           backdropFilter: isTransparent ? 'none' : 'blur(12px)',
diff --git a/apps/web/src/components/PageWithNav.tsx b/apps/web/src/components/PageWithNav.tsx
index b3bafe66..b5fcf479 100644
--- a/apps/web/src/components/PageWithNav.tsx
+++ b/apps/web/src/components/PageWithNav.tsx
@@ -213,7 +213,13 @@ export function PageWithNav({
   return (
     <>
       <AppNavBar navSlot={navContent} />
-      {children}
+      <div
+        style={{
+          paddingTop: 'var(--app-nav-height, 80px)',
+        }}
+      >
+        {children}
+      </div>
       {configurePlayerId && (
         <PlayerConfigDialog
           playerId={configurePlayerId}