website refactor

apps/website/docs/LAYOUT_RECREATION_SUMMARY.md

@@ -0,0 +1,153 @@
+# 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
+
+- [x] TypeScript compilation passes
+- [x] ESLint passes with no warnings
+- [x] Layout structure follows THEME.md
+- [x] Scroll behavior is correct (no nested scrollbars)
+- [x] Content is properly centered
+- [x] Header and footer have consistent styling
+- [x] Sidebar shows/hides correctly based on auth state
+- [x] 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.