website refactor

apps/website/components/races/TelemetryStrip.tsx

@@ -1,4 +1,5 @@
 import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface TelemetryItem {
@@ -25,7 +26,7 @@ export function TelemetryStrip({ items, className = '' }: TelemetryStripProps) {
       className={`bg-graphite-black/80 border-y border-border-gray/30 py-2 px-4 flex items-center gap-8 overflow-x-auto no-scrollbar ${className}`}
     >
       {items.map((item, index) => (
-        <Box key={index} display="flex" align="center" gap={2} className="whitespace-nowrap">
+        <Stack key={index} direction="row" align="center" gap={2} className="whitespace-nowrap">
           <Text size="xs" color="text-gray-500" uppercase weight="bold" letterSpacing="widest">
             {item.label}
           </Text>
@@ -42,7 +43,7 @@ export function TelemetryStrip({ items, className = '' }: TelemetryStripProps) {
               {item.trend === 'up' ? '↑' : item.trend === 'down' ? '↓' : '•'}
             </Text>
           )}
-        </Box>
+        </Stack>
       ))}
     </Box>
   );