working but sheet styling is ugly

src/features/teams/hooks/use-available-players.ts

@@ -16,22 +16,22 @@ export const playerQueries = {
 
 export const useAvailablePlayers = (excludedPlayerIds: string[] = []) => {
   const { data: allPlayers } = useServerSuspenseQuery(playerQueries.all());
-  
+
   const availablePlayers = useMemo(() => {
     if (!allPlayers) return [];
-    
+
     return allPlayers.filter(player => 
-      !excludedPlayerIds.includes(player.id) && 
-      player.first_name && 
-      player.last_name
+        !excludedPlayerIds.includes(player.id) &&
+        player.first_name &&
+        player.last_name
     );
   }, [allPlayers, excludedPlayerIds]);
 
   const playerOptions = useMemo(() => 
     availablePlayers.map(player => ({
-      value: player.id,
+        value: player.id,
       label: `${player.first_name} ${player.last_name}`.trim() || 'Unnamed Player'
-    })),
+      })),
     [availablePlayers]
   );
 
@@ -40,4 +40,6 @@ export const useAvailablePlayers = (excludedPlayerIds: string[] = []) => {
     playerOptions,
     allPlayers
   };
-};
+};
+
+export const useAllPlayers = () => useServerSuspenseQuery(playerQueries.all());