fix tournament card size

src/features/tournaments/components/podium.tsx

@@ -7,17 +7,7 @@ interface PodiumProps {
 }
 
 export const Podium = ({ tournament }: PodiumProps) => {
-  if (!tournament.first_place) {
+  if (!tournament.first_place) return;
-    return (
-      <Box p="md">
-        <Center>
-          <Text c="dimmed" size="sm">
-            Podium will appear here when the tournament is over
-          </Text>
-        </Center>
-      </Box>
-    );
-  }
 
   return (
     <Stack gap="xs" px="md">

src/features/tournaments/components/tournament-card.tsx

@@ -28,14 +28,6 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
       w="100%"
       onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}
       style={{ borderRadius: "var(--mantine-radius-md)" }}
-      styles={{
-        root: {
-          "&:hover": {
-            transform: "translateY(-2px)",
-            transition: "transform 0.15s ease",
-          },
-        },
-      }}
     >
       <Card
         withBorder
@@ -46,19 +38,11 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
           transition: "all 0.15s ease",
           border: "1px solid var(--mantine-color-default-border)",
         }}
-        styles={{
-          root: {
-            "&:hover": {
-              borderColor: "var(--mantine-primary-color-filled)",
-              boxShadow: "var(--mantine-shadow-sm)",
-            },
-          },
-        }}
       >
         <Group justify="space-between" align="center">
           <Group gap="md" align="center">
             <Avatar
-              size={95}
+              size={75}
               radius="sm"
               name={tournament.name}
               contain
@@ -78,7 +62,7 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
                 <Stack gap={6} >
                   {tournament.first_place && (
                     <Badge
-                      size="md"
+                      size="sm"
                       radius="md"
                       variant="filled"
                       color="yellow"
@@ -96,7 +80,7 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
                   )}
                   {tournament.second_place && (
                     <Badge
-                      size="md"
+                      size="sm"
                       radius="md"
                       color="gray"
                       variant="filled"
@@ -113,7 +97,7 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
                   )}
                   {tournament.third_place && (
                     <Badge
-                      size="md"
+                      size="sm"
                       radius="md"
                       color="orange"
                       variant="filled"

src/features/tournaments/components/tournament-stats.tsx

@@ -14,6 +14,7 @@ import { Tournament } from "@/features/tournaments/types";
 import { CrownIcon, MedalIcon, TreeStructureIcon } from "@phosphor-icons/react";
 import Avatar from "@/components/avatar";
 import ListLink from "@/components/list-link";
+import { Podium } from "./podium";
 
 interface TournamentStatsProps {
   tournament: Tournament;
@@ -40,111 +41,6 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
     });
   }, [tournament.team_stats]);
 
-  const renderPodium = () => {
-    if (!isComplete || !tournament.first_place) {
-      return (
-        <Box p="md">
-          <Center>
-            <Text c="dimmed" size="sm">
-              Podium will appear here when the tournament is over
-            </Text>
-          </Center>
-        </Box>
-      );
-    }
-
-    return (
-      <Stack gap="xs" px="md">
-        {tournament.first_place && (
-          <Group
-            gap="md"
-            p="md"
-            style={{
-              backgroundColor: 'var(--mantine-color-yellow-light)',
-              borderRadius: 'var(--mantine-radius-md)',
-              border: '3px solid var(--mantine-color-yellow-outline)',
-              boxShadow: 'var(--mantine-shadow-md)',
-            }}
-          >
-            <ThemeIcon size="xl" color="yellow" variant="light" radius="xl">
-              <CrownIcon size={24} />
-            </ThemeIcon>
-            <Stack gap={4} style={{ flex: 1 }}>
-              <Text size="md" fw={600}>
-                {tournament.first_place.name}
-              </Text>
-              <Group gap="xs">
-                {tournament.first_place.players?.map((player) => (
-                  <Text key={player.id} size="sm" c="dimmed">
-                    {player.first_name} {player.last_name}
-                  </Text>
-                ))}
-              </Group>
-            </Stack>
-          </Group>
-        )}
-
-        {tournament.second_place && (
-          <Group
-            gap="md"
-            p="xs"
-            style={{
-              backgroundColor: 'var(--mantine-color-default)',
-              borderRadius: 'var(--mantine-radius-md)',
-              border: '2px solid var(--mantine-color-default-border)',
-              boxShadow: 'var(--mantine-shadow-sm)',
-            }}
-          >
-            <ThemeIcon size="lg" color="gray" variant="light" radius="xl">
-              <MedalIcon size={20} />
-            </ThemeIcon>
-            <Stack gap={4} style={{ flex: 1 }}>
-              <Text size="sm" fw={600}>
-                {tournament.second_place.name}
-              </Text>
-              <Group gap="xs">
-                {tournament.second_place.players?.map((player) => (
-                  <Text key={player.id} size="xs" c="dimmed">
-                    {player.first_name} {player.last_name}
-                  </Text>
-                ))}
-              </Group>
-            </Stack>
-          </Group>
-        )}
-
-        {tournament.third_place && (
-          <Group
-            gap="md"
-            p="xs"
-            style={{
-              backgroundColor: 'var(--mantine-color-orange-light)',
-              borderRadius: 'var(--mantine-radius-md)',
-              border: '2px solid var(--mantine-color-orange-outline)',
-              boxShadow: 'var(--mantine-shadow-sm)',
-            }}
-          >
-            <ThemeIcon size="lg" color="orange" variant="light" radius="xl">
-              <MedalIcon size={18} />
-            </ThemeIcon>
-            <Stack gap={4} style={{ flex: 1 }}>
-              <Text size="sm" fw={600}>
-                {tournament.third_place.name}
-              </Text>
-              <Group gap="xs">
-                {tournament.third_place.players?.map((player) => (
-                  <Text key={player.id} size="xs" c="dimmed">
-                    {player.first_name} {player.last_name}
-                  </Text>
-                ))}
-              </Group>
-            </Stack>
-          </Group>
-        )}
-      </Stack>
-    );
-  };
-
   const teamStatsWithCalculations = useMemo(() => {
     return sortedTeamStats.map((stat) => ({
       ...stat,
@@ -260,7 +156,7 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
   return (
     <Container size="100%" px={0}>
       <Stack gap="md">
-        {renderPodium()}
+        <Podium tournament={tournament} />
         <ListLink
           label={`View Bracket`}
           to={`/tournaments/${tournament.id}/bracket`}