From 247c3d9874303f83641e599724a485eea8d5604a Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Tue, 4 Nov 2025 19:15:07 -0600
Subject: [PATCH] fix(layout): remove wrapper, use utility class for nav
 spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Better approach to fixed nav spacing:
- Removed wrapper div from PageWithNav (was creating white gap)
- Added .with-fixed-nav utility class in globals.css
- Pages apply class to their root element (with background)
- Padding is applied to the element with the background, not a wrapper

This prevents the white bar issue because the background element itself
has the padding, so the background extends under the nav properly.

Applied to calendar page as example. Other pages can add the class as needed.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/create/calendar/page.tsx | 10 ++++++----
 apps/web/src/app/globals.css              |  5 +++++
 apps/web/src/components/PageWithNav.tsx   |  8 +-------
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/app/create/calendar/page.tsx b/apps/web/src/app/create/calendar/page.tsx
index e453f660..db13710f 100644
--- a/apps/web/src/app/create/calendar/page.tsx
+++ b/apps/web/src/app/create/calendar/page.tsx
@@ -42,7 +42,7 @@ export default function CalendarCreatorPage() {
       const data = await response.json()
 
       // Convert base64 PDF to blob and trigger download
-      const pdfBytes = Uint8Array.from(atob(data.pdf), c => c.charCodeAt(0))
+      const pdfBytes = Uint8Array.from(atob(data.pdf), (c) => c.charCodeAt(0))
       const blob = new Blob([pdfBytes], { type: 'application/pdf' })
       const url = window.URL.createObjectURL(blob)
       const a = document.createElement('a')
@@ -54,7 +54,9 @@ export default function CalendarCreatorPage() {
       document.body.removeChild(a)
     } catch (error) {
       console.error('Error generating calendar:', error)
-      alert(`Failed to generate calendar: ${error instanceof Error ? error.message : 'Unknown error'}`)
+      alert(
+        `Failed to generate calendar: ${error instanceof Error ? error.message : 'Unknown error'}`
+      )
     } finally {
       setIsGenerating(false)
     }
@@ -64,12 +66,12 @@ export default function CalendarCreatorPage() {
     <PageWithNav navTitle="Create" navEmoji="📅">
       <div
         data-component="calendar-creator"
-        className={css({
+        className={`with-fixed-nav ${css({
           minHeight: '100vh',
           bg: 'gray.900',
           color: 'white',
           padding: '2rem',
-        })}
+        })}`}
       >
         <div
           className={css({
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 62552942..91fb772c 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -10,6 +10,11 @@
   --app-nav-height-minimal: 92px;
 }
 
+/* Utility class for pages with fixed nav */
+.with-fixed-nav {
+  padding-top: var(--app-nav-height, 80px);
+}
+
 /* Custom global styles */
 body {
   font-family:
diff --git a/apps/web/src/components/PageWithNav.tsx b/apps/web/src/components/PageWithNav.tsx
index eccf0438..b3bafe66 100644
--- a/apps/web/src/components/PageWithNav.tsx
+++ b/apps/web/src/components/PageWithNav.tsx
@@ -213,13 +213,7 @@ export function PageWithNav({
   return (
     <>
       <AppNavBar navSlot={navContent} />
-      <div
-        style={{
-          marginTop: 'var(--app-nav-height, 80px)',
-        }}
-      >
-        {children}
-      </div>
+      {children}
       {configurePlayerId && (
         <PlayerConfigDialog
           playerId={configurePlayerId}