fix(layout): remove wrapper, use utility class for nav spacing

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

@@ -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({

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:

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}