website refactor

apps/website/ui/ContentViewport.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
-import { Box } from './Box';
-import { Container } from './Container';
+import { Box, type Spacing } from './Box';
 
 export interface ContentViewportProps {
   children: ReactNode;
@@ -8,23 +7,25 @@ export interface ContentViewportProps {
   fullWidth?: boolean;
 }
 
-export const ContentViewport = ({ 
-  children, 
+export const ContentViewport = ({
+  children,
   padding = 'md',
-  fullWidth = false
+  fullWidth = false,
 }: ContentViewportProps) => {
-  const paddingMap: Record<string, any> = {
+  const paddingMap: Record<NonNullable<ContentViewportProps['padding']>, Spacing> = {
     none: 0,
     sm: 4,
     md: 8,
     lg: 12,
   };
 
+  const maxWidth = fullWidth ? '100%' : '80rem';
+
   return (
-    <Box flexGrow={1} width="full">
-      <Container size={fullWidth ? 'full' : 'xl'} py={paddingMap[padding]}>
+    <Box flexGrow={1} width="full" display="flex" justifyContent="center" minWidth="0">
+      <Box width="full" maxWidth={maxWidth} paddingX={4} py={paddingMap[padding]} minWidth="0">
         {children}
-      </Container>
+      </Box>
     </Box>
   );
-};
+};