add responsive

src/pages/Stat/StatPage.jsx

@@ -1,4 +1,3 @@
-import React, { useState } from "react";
 import Dropdown from 'react-bootstrap/Dropdown';
 import { Doughnut } from "react-chartjs-2";
 import { Chart, ArcElement } from "chart.js";
@@ -6,6 +5,8 @@ import styles from "./StatPage.module.css";
 import Button from "./../../components/ui/button/button";
 import { readUsedSize } from "chart.js/helpers";
 import { MenuItem, Select, FormControl, InputLabel } from "@mui/material";
+import React, { useState, useEffect, useRef } from "react";
+
 
 Chart.register(ArcElement);
 
@@ -13,7 +14,7 @@ function StatPage() {
   const [months, setMonths] = useState(3);
   const [selected, setSelected] = useState("3");
   const [participationRate, setParticipationRate] = useState(89);
-
+ 
   const incompleteEvents = [
     { title: "Événement A", tasks: "Préparation des flyers" },
     { title: "Événement B", tasks: "Réservation de la salle" },
@@ -21,9 +22,7 @@ function StatPage() {
     { title: "Événement D", tasks: "Communication sur les réseaux" },
     { title: "Événement E", tasks: "Communication sur les réseaux" },
     { title: "Événement F", tasks: "Communication sur les réseaux" },
-
   ];
-
   const pendingMembers = [
     { name: "Antoine Ordonneau" },
     { name: "Giovanni Josserand" },
@@ -37,11 +36,9 @@ function StatPage() {
   const handleValidate = (name) => {
     console.log(`Valider ${name}`);
   };
-
   const handleReject = (name) => {
     console.log(`Refuser ${name}`);
   };
-
   const chartData = {
     labels: ["Progress", "Background"],
     datasets: [
@@ -50,13 +47,12 @@ function StatPage() {
         backgroundColor: ["#1e60f9ff", "#ffffffff"],
         borderWidth: 0,
         weight: 10,
-        cutout: "95%",
+        cutout: "93%",
         circumference: 360,
         rotation: -90,
       },
     ],
   };
-
   const chartOptions = {
     responsive: true,
     plugins: {
@@ -72,23 +68,24 @@ function StatPage() {
       animateRotate: true,
     },
   };
-
   return (
     <div className={styles.container}>
       <div className={`${styles.leftBlock} glassCard`}>
         <div className={styles.participationHeader}>
           <div className={`${styles.partiText} glassCard`}>
             <label htmlFor={styles.months}>Taux de participation depuis :</label>
-            
-            <FormControl>
+            <div className={styles.formControl}>
+            <FormControl className={styles.formDesign}>
               <Select
     value={selected}
-    onChange={(e) => setSelected(e.target.value)}
+    onChange={(e) => 
+      setSelected(e.target.value)
+      }
     sx={{
       width: "100px",
       height: "35px",
       fontSize: "19px",
-      paddingBottom:"2.5px",
+      paddingBottom:"-2px",
       
       "& .MuiOutlinedInput-notchedOutline": {
         border: "none",
@@ -106,7 +103,7 @@ function StatPage() {
         sx: {
           className: "glassCard",
           borderRadius:"7px",
-          background: "rgba(255, 255, 255, 0.65)",
+          //background: "rgba(255, 255, 255, 0.65)",
           width: "100px",
           maxWidth: "100px",
           
@@ -121,6 +118,7 @@ function StatPage() {
     <MenuItem value="12" sx={{ fontSize: "18px" }}>12 mois</MenuItem>
   </Select>
 </FormControl>
+</div>
 
           </div>
         </div>