more imporvmentes

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

@@ -22,12 +22,21 @@ const TeamListItem = React.memo(({ team }: TeamListItemProps) => {
     [team.players]
   );
 
+  const teamNameSize = useMemo(() => {
+    const nameLength = team.name.length;
+    if (nameLength > 20) return 'xs';
+    if (nameLength > 15) return 'sm';
+    return 'md';
+  }, [team.name]);
+
   return (
-    <Group justify="space-between" w="100%">
+    <Group justify="space-between" w="100%" wrap="nowrap">
-      <Text fw={500}>{`${team.name}`}</Text>
+      <Text fw={500} size={teamNameSize} style={{ flexShrink: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-      <Stack ml="auto" gap={0}>
+        {`${team.name}`}
-        {playerNames.map((name) => (
+      </Text>
-          <Text size="xs" c="dimmed" ta="right">
+      <Stack ml="auto" gap={0} style={{ flexShrink: 0 }}>
+        {playerNames.map((name, idx) => (
+          <Text key={idx} size="xs" c="dimmed" ta="right">
             {name}
           </Text>
         ))}