style : fix chess com input

src/lib/chessCom.ts

@@ -19,7 +19,7 @@ export const getUserRecentGames = async (
 
   const games: ChessComGame[] = data?.games ?? [];
 
-  if (games.length < 20) {
+  if (games.length < 50) {
     const previousMonth = month === 1 ? 12 : month - 1;
     const previousPaddedMonth = getPaddedMonth(previousMonth);
     const yearToFetch = previousMonth === 12 ? year - 1 : year;
@@ -33,9 +33,9 @@ export const getUserRecentGames = async (
     games.push(...(dataPreviousMonth?.games ?? []));
   }
 
-  games.sort((a, b) => {
+  const gamesToReturn = games.slice(0, 50).sort((a, b) => {
     return b.end_time - a.end_time;
   });
 
-  return games;
+  return gamesToReturn;
 };

src/sections/loadGame/chessComInput.tsx

@@ -47,7 +47,7 @@ export default function ChessComInput({ pgn, setPgn }: Props) {
 
   return (
     <>
-      <FormControl sx={{ m: 1, width: 300 }}>
+      <FormControl sx={{ m: 1, width: 600 }}>
         <TextField
           label="Enter your Chess.com username..."
           variant="outlined"
@@ -56,6 +56,7 @@ export default function ChessComInput({ pgn, setPgn }: Props) {
         />
       </FormControl>
 
+      {games.length > 0 && (
         <Grid
           container
           item
@@ -88,6 +89,7 @@ export default function ChessComInput({ pgn, setPgn }: Props) {
             </ListItemButton>
           ))}
         </Grid>
+      )}
     </>
   );
 }