website refactor

apps/website/components/races/RaceActionBar.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 import { CheckCircle, LogOut, PlayCircle, Scale, Trophy, XCircle } from 'lucide-react';
 
 interface RaceActionBarProps {
@@ -41,7 +41,7 @@ export function RaceActionBar({
   isLoading = {}
 }: RaceActionBarProps) {
   return (
-    <Stack direction="row" gap={3} wrap>
+    <ButtonGroup gap={3}>
       {status === 'scheduled' && (
         <>
           {!isUserRegistered && canRegister && (
@@ -140,6 +140,6 @@ export function RaceActionBar({
           Reopen Race
         </Button>
       )}
-    </Stack>
+    </ButtonGroup>
   );
 }