gridpilot.gg/apps/website/docs/LAYOUT_RECREATION_SUMMARY.md

Layout Recreation Summary

Overview

Completely recreated the application layout following the "Precision Racing Minimal" design philosophy from docs/THEME.md.

Issues Fixed

1. Content Alignment

• Issue: Content was left-aligned instead of centered
• Fix: Added alignItems="center" to outer Box in ContentViewport
• Result: Content is now properly centered with marginX="auto"

2. Dev Toolbar Positioning

• Issue: Dev toolbar appearing below footer
• Fix: Wrapped footer in Box with position="relative" and zIndex={50}
• Result: Footer stays at bottom, dev toolbar floats above

3. Scroll Containment

• Issue: Nested scrollbars and improper scroll behavior
• Fix: Proper overflow="hidden" on parent, overflowY="auto" on content
• Result: Single scroll viewport, clean scrolling experience

Key Changes

1. AppShell (components/app/AppShell.tsx)

• Before: Basic flex container with background
• After:
  • Added overflow="hidden" to prevent body scroll issues
  • Applied cockpit-inspired gradient background
  • Ensures proper layout containment

2. ControlBar (ui/ControlBar.tsx)

• Before: 48px height, basic styling
• After:
  • Increased height to 56px for better visual presence
  • Enhanced backdrop blur from backdrop-blur-md to backdrop-blur-xl
  • Added subtle shadow for depth
  • Added padding (px={6}) for better spacing
  • Improved visual hierarchy with darker background (rgba(10, 10, 11, 0.95))

3. HeaderContentTemplate (templates/layout/HeaderContentTemplate.tsx)

• Before: Basic header layout
• After:
  • Added horizontal padding (px={6}) for consistent spacing
  • Enhanced border styling with explicit color
  • Maintains clean, cockpit-inspired navigation

4. ContentViewport (ui/ContentViewport.tsx)

• Before:
  • Content area had its own scroll bars
  • Left-aligned content
  • Improper scroll containment
• After:
  • Fixed scroll containment: Proper overflow="hidden" on parent, overflowY="auto" on content
  • Proper alignment: Centered content with marginX="auto" and maxWidth
  • Clean scrolling: Single scroll viewport, no nested scrollbars
  • Responsive: Maintains fullWidth option for specific pages
  • Consistent padding: Uses padding map for standardized spacing

5. GlobalFooterTemplate (templates/layout/GlobalFooterTemplate.tsx)

• Before: Basic footer with minimal styling
• After:
  • Increased padding (paddingY={3}, paddingX={6})
  • Darker background with transparency (rgba(10, 10, 11, 0.95))
  • Subtle top border for visual separation
  • Consistent with header styling

6. GlobalSidebarTemplate (templates/layout/GlobalSidebarTemplate.tsx)

• Before: Basic sidebar
• After:
  • Enhanced gradient background (linear-gradient from #0d0d0e to #0a0a0b)
  • Maintains proper sticky positioning
  • Consistent with overall cockpit theme

7. RootAppShellTemplate (templates/layout/RootAppShellTemplate.tsx)

• Before: Basic layout orchestration
• After:
  • Improved overflow handling in main content area
  • Removed redundant background (transparent)
  • Maintains proper z-index layering
  • Ensures content viewport handles scrolling correctly

Design Principles Applied

From THEME.md:

1. Matte dark surfaces: All components use dark backgrounds with subtle gradients
2. Thin, crisp separators: Borders use var(--ui-color-border-default) and var(--ui-color-border-muted)
3. Soft blue/cyan glows: Maintained existing accent colors (Electric Blue, Telemetry Aqua)
4. Instrument-grade feel: All spacing and sizing follows consistent scale
5. Minimal visual noise: Removed unnecessary decorations, focused on function

Layout Structure (Telemetry Workspace):

• Header (ControlBar): Context + session controls (56px)
• Sidebar (GlobalSidebar): Navigation rail (260px, sticky)
• Main Content: Centered, proper scrolling
• Footer: System status (56px)

Scroll Behavior Fixes

Before:

Body scroll → Content area scroll → Nested scrollbars

After:

Body scroll disabled → Single viewport scroll

Key changes:

1. AppShell: overflow="hidden" on root
2. ContentViewport: Proper overflowY="auto" on content container
3. RootAppShellTemplate: Main area has overflow="hidden", content has overflowY="auto"

Visual Improvements

1. Header: Taller (56px vs 48px), better blur, subtle shadow
2. Footer: More prominent, better spacing
3. Content: Centered, clean scrolling, no alignment issues
4. Sidebar: Enhanced gradient, better visual depth
5. Overall: Consistent cockpit/dashboard aesthetic

Testing Checklist

• TypeScript compilation passes
• ESLint passes with no warnings
• Layout structure follows THEME.md
• Scroll behavior is correct (no nested scrollbars)
• Content is properly centered
• Header and footer have consistent styling
• Sidebar shows/hides correctly based on auth state
• Responsive behavior maintained

Files Modified

1. apps/website/components/app/AppShell.tsx
2. apps/website/ui/ControlBar.tsx
3. apps/website/ui/TopNav.tsx
4. apps/website/ui/ContentViewport.tsx
5. apps/website/templates/layout/HeaderContentTemplate.tsx
6. apps/website/templates/layout/GlobalFooterTemplate.tsx
7. apps/website/templates/layout/GlobalSidebarTemplate.tsx
8. apps/website/templates/layout/RootAppShellTemplate.tsx

Next Steps

The layout is now ready for content implementation. All components follow the design system and provide a solid foundation for:

• Page templates
• Content components
• Interactive elements
• State management integration

The layout respects all architecture rules and provides a clean, professional racing interface.