update

client/src/components/LeaderboardSection.jsx

@@ -16,7 +16,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { useLeaderboard } from "../context/LeaderboardContext";
 import SearchOffIcon from "@mui/icons-material/SearchOff";
 
-const ITEMS_PER_PAGE = 3;
+const ITEMS_PER_PAGE = 4;
 
 const LeaderboardSection = ({
   title,
@@ -213,12 +213,12 @@ const LeaderboardSection = ({
   const remainingLeaderboards = approvedLeaderboards.slice(ITEMS_PER_PAGE);
 
   // Calculate how many skeletons we need
-  const skeletonsNeeded = Math.max(0, 3 - approvedLeaderboards.length);
+  const skeletonsNeeded = Math.max(0, 4 - approvedLeaderboards.length);
 
   // On affiche le bouton seulement si aucune catégorie n'est sélectionnée
   const showExpandButton = !selectedCategory;
 
-  // Le bouton est actif seulement s'il y a plus de 3 leaderboards
+  // Le bouton est actif seulement s'il y a plus de 4 leaderboards
   const isExpandButtonEnabled = approvedLeaderboards.length > ITEMS_PER_PAGE;
 
   const toggleExpanded = () => {
@@ -510,13 +510,13 @@ const LeaderboardSection = ({
         <>
           <Grid container spacing={3}>
             {displayedLeaderboards.map((leaderboard, index) => (
-              <Grid item xs={12} sm={6} md={4} key={index}>
+              <Grid item xs={12} sm={6} md={3} key={index}>
                 <LeaderboardCard leaderboard={leaderboard} />
               </Grid>
             ))}
             {/* Add skeletons if needed */}
             {Array.from({ length: skeletonsNeeded }).map((_, index) => (
-              <Grid item xs={12} sm={6} md={4} key={`skeleton-${index}`}>
+              <Grid item xs={12} sm={6} md={3} key={`skeleton-${index}`}>
                 <Box
                   sx={{
                     height: "180px",
@@ -535,7 +535,7 @@ const LeaderboardSection = ({
           <Collapse in={isExpanded} timeout={300} unmountOnExit>
             <Grid container spacing={3} sx={{ mt: 0 }}>
               {remainingLeaderboards.map((leaderboard, index) => (
-                <Grid item xs={12} sm={6} md={4} key={index + ITEMS_PER_PAGE}>
+                <Grid item xs={12} sm={6} md={3} key={index + ITEMS_PER_PAGE}>
                   <LeaderboardCard leaderboard={leaderboard} />
                 </Grid>
               ))}