various improvements

src/features/teams/components/team-list.tsx

@@ -1,4 +1,4 @@
-import { List, ListItem, Skeleton, Stack, Text } from "@mantine/core";
+import { Divider, Group, List, ListItem, Skeleton, Stack, Text } from "@mantine/core";
 import Avatar from "@/components/avatar";
 import { TeamInfo } from "@/features/teams/types";
 import { useNavigate } from "@tanstack/react-router";
@@ -15,16 +15,16 @@ const TeamListItem = React.memo(({ team }: TeamListItemProps) => {
   );
 
   return (
-    <>
-      <Stack gap={0}>
-        <Text fw={500}>{`${team.name}`}</Text>
+    <Group justify="space-between" w='100%'>
+      <Text fw={500}>{`${team.name}`}</Text>
+      <Stack ml="auto" gap={0}>
         {playerNames.map((name) => (
-          <Text size="xs" c="dimmed">
-            {name}
-          </Text>
-        ))}
+        <Text size="xs" c="dimmed" ta="right">
+          {name}
+        </Text>
+      ))}
       </Stack>
-    </>
+    </Group>
   );
 });
 
@@ -59,15 +59,22 @@ const TeamList = ({ teams, loading = false }: TeamListProps) => {
   return (
     <List>
       {teams?.map((team) => (
-        <ListItem
-          key={team.id}
-          py="xs"
-          icon={<Avatar radius="sm" size={40} name={`${team.name}`} />}
-          style={{ cursor: "pointer" }}
-          onClick={() => handleClick(team.id)}
-        >
-          <TeamListItem team={team} />
-        </ListItem>
+        <div key={team.id}>
+          <ListItem
+            p="xs"
+            icon={<Avatar radius="sm" size={40} name={`${team.name}`} />}
+            style={{ cursor: "pointer" }}
+            onClick={() => handleClick(team.id)}
+            styles={{
+              itemWrapper: { width: "100%" },
+              itemLabel: { width: "100%" }
+            }}
+            w="100%"
+          >
+            <TeamListItem team={team} />
+          </ListItem>
+          <Divider />
+        </div>
       ))}
     </List>
   );