skeletons, tournament stats, polish, bug fixes

src/features/tournaments/components/upcoming-tournament/enrolled-free-agent.tsx

@@ -11,10 +11,30 @@ const EnrolledFreeAgent: React.FC<{ tournamentId: string }> = ({
 
   const copyToClipboard = async (phone: string) => {
     try {
-      await navigator.clipboard.writeText(phone);
-      toast.success("Phone number copied!");
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(phone);
+        toast.success("Phone number copied!");
+        return;
+      }
+
+      const textArea = document.createElement("textarea");
+      textArea.value = phone;
+      textArea.style.display = "hidden";
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+
+      const successful = document.execCommand('copy');
+      document.body.removeChild(textArea);
+
+      if (successful) {
+        toast.success("Phone number copied!");
+      } else {
+        throw new Error("Copy command failed");
+      }
     } catch (err) {
-      toast.success("Failed to copy");
+      console.error("Failed to copy:", err);
+      toast.error("Failed to copy");
     }
   };
 

src/features/tournaments/components/upcoming-tournament/header.tsx

@@ -31,7 +31,7 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
       >
         <TrophyIcon size={32} />
       </Avatar>
-      <Flex gap="xs" direction="row" wrap="wrap" justify="space-around">
+      <Flex gap="xs" direction="column" justify="space-around">
         {tournament.location && (
           <Group gap="xs">
             <ThemeIcon size="sm" variant="light" radius="sm">

src/features/tournaments/components/upcoming-tournament/index.tsx

@@ -51,8 +51,8 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
     <Stack gap="lg">
       <Header tournament={tournament} />
 
-      <Stack px="md">
-        {tournament.desc && <Text size="sm">{tournament.desc}</Text>}
+      <Stack px="xs">
+        {tournament.desc && <Text px="md" size="sm">{tournament.desc}</Text>}
 
         <Card withBorder radius="lg" p="lg">
           <Stack gap="xs">

src/features/tournaments/components/upcoming-tournament/skeleton.tsx

@@ -4,37 +4,32 @@ const UpcomingTournamentSkeleton = () => {
   return (
     <Stack gap="lg">
       <Flex px="md" justify="center" w="100%">
-        <Skeleton height={240} width={240} radius="md" />
-        <Stack justify="space-between" align="flex-start">
-          <Box style={{ flex: 1 }}>
-            <Skeleton height={32}  mb="xs" />
-            <Skeleton height={16} />
-          </Box>
-        </Stack>
+        <Skeleton height={200} width={240} radius="md" />
       </Flex>
+        <Stack align="center" gap={2}>
+          <Skeleton height={16} w="30%" mb="md" />
+          <Skeleton height={16}  w="30%" />
+        </Stack>
 
       <Stack px="md">
-        <Skeleton height={14} width="80%" />
-
         <Card withBorder radius="lg" p="lg">
+          <Skeleton height={14} width="80%" mb={16} />
           <Group mb="sm" gap="xs" align="center">
-            <Skeleton height={16} width={16} />
-            <Skeleton height={14} width="20%" />
+            <Skeleton height={32} width={16} />
+            <Skeleton height={32} width="20%" />
             <Box ml="auto">
-              <Skeleton height={20} width={80} radius="sm" />
+              <Skeleton height={32} width={80} radius="sm" />
+            </Box>
+          </Group>
+          <Group mb="sm" gap="xs" align="center">
+            <Skeleton height={32} width={16} />
+            <Skeleton height={32} width="20%" />
+            <Box ml="auto">
+              <Skeleton height={32} width={80} radius="sm" />
             </Box>
           </Group>
         </Card>
       </Stack>
-
-      <Box>
-        <Divider />
-        <Stack gap={0}>
-          <Skeleton height={48} width="100%" />
-          <Skeleton height={48} width="100%" />
-          <Skeleton height={48} width="100%" />
-        </Stack>
-      </Box>
     </Stack>
   );
 };