website refactor

apps/website/components/races/SessionSummaryPanel.tsx

@@ -1,5 +1,6 @@
 import { Box } from '@/ui/Box';
 import { Panel } from '@/ui/Panel';
+import { Stack } from '@/ui/Stack';
 import { StatusDot } from '@/ui/StatusDot';
 import { Text } from '@/ui/Text';
 
@@ -30,16 +31,16 @@ export function SessionSummaryPanel({
 
   return (
     <Panel title="Session Summary" className={className}>
-      <Box display="flex" flexDirection="col" gap={3}>
-        <Box display="flex" align="center" justify="between">
+      <Stack gap={3}>
+        <Stack direction="row" align="center" justify="between">
           <Text weight="bold" size="lg">{title}</Text>
-          <Box display="flex" align="center" gap={2}>
+          <Stack direction="row" align="center" gap={2}>
             <StatusDot color={statusColor} pulse={status === 'live'} size={2} />
             <Text size="xs" uppercase weight="bold" style={{ color: statusColor }}>
               {status}
             </Text>
-          </Box>
-        </Box>
+          </Stack>
+        </Stack>
 
         <Box display="grid" gridCols={2} gap={4} borderTop borderStyle="solid" borderColor="border-gray/10" pt={3}>
           {startTime && (
@@ -61,7 +62,7 @@ export function SessionSummaryPanel({
             </Box>
           )}
         </Box>
-      </Box>
+      </Stack>
     </Panel>
   );
 }