728a92076a
- Ensures exact 100vh height with no scrolling (vertical or horizontal) - Navigation never covers game elements with safe area padding (80px top) - Perfect viewport fit on all devices - Consistent experience across all games 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import { ReactNode } from 'react'
|
|
import { css } from '../../styled-system/css'
|
|
|
|
interface StandardGameLayoutProps {
|
|
children: ReactNode
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* Standard game layout that ensures:
|
|
* 1. Exact 100vh height with no scrolling (vertical or horizontal)
|
|
* 2. Navigation never covers game elements (safe area padding)
|
|
* 3. Perfect viewport fit on all devices
|
|
* 4. Consistent experience across all games
|
|
*/
|
|
export function StandardGameLayout({ children, className }: StandardGameLayoutProps) {
|
|
return (
|
|
<div className={css({
|
|
// Exact viewport sizing - no scrolling ever
|
|
height: '100vh',
|
|
width: '100vw',
|
|
overflow: 'hidden',
|
|
|
|
// Safe area for navigation (fixed at top: 4px, right: 4px)
|
|
// Navigation is ~60px tall, so we need padding-top of ~80px to be safe
|
|
paddingTop: '80px',
|
|
paddingRight: '4px', // Ensure nav doesn't overlap content on right side
|
|
paddingBottom: '4px',
|
|
paddingLeft: '4px',
|
|
|
|
// Box sizing to include padding in dimensions
|
|
boxSizing: 'border-box',
|
|
|
|
// Flex container for game content
|
|
display: 'flex',
|
|
flexDirection: 'column'
|
|
}, className)}>
|
|
{children}
|
|
</div>
|
|
)
|
|
} |