test responsive menu size

src/App.css

@@ -164,4 +164,8 @@
     font-weight : bold;
     color : #3ec5d3;
 }
+.css-k2r9ec-MuiToolbar-root{
+    border-bottom : 1px solid #fd4b4b;
+}
+
 

src/Components/Dashboard.js

@@ -18,7 +18,7 @@ import ProfilePicture from '../Images/man.png';
 
 import useAuth from '../Auth/useAuth';
 import { Outlet, useNavigate} from "react-router-dom";
-import { MenuMovil } from '../Components/MenuMovil';
+// import { MenuMovil } from '../Components/MenuMovil';
 import Footer from "../Components/Footer";
 
 
@@ -104,15 +104,15 @@ function DashboardContent() {
     const handleClick = (event) => setAnchorEl(event.currentTarget);
     const handleClose = () => setAnchorEl(null)
 
-    const [anchorElMovil, setAnchorElMov] = React.useState(null);
-    const openMov = Boolean(anchorElMovil);
-    const handleCloseMov = () => {
-        setAnchorElMov(null);
-    };
+    // const [anchorElMovil, setAnchorElMov] = React.useState(null);
+    // const openMov = Boolean(anchorElMovil);
+    // const handleCloseMov = () => {
+    //     setAnchorElMov(null);
+    // };
 
-    const MenuResponsive = ()  => {
-        setAnchorElMov(elRef.current);
-    } 
+    // const MenuResponsive = ()  => {
+    //     setAnchorElMov(elRef.current);
+    // } 
 
     const CerrarSession = () => {
         console.log('cerrando session')
@@ -126,15 +126,15 @@ function DashboardContent() {
                 <CssBaseline />
                 <AppBar style={{ backgroundColor : '#fff', boxShadow : 'None' }} position="absolute" open={useCheckMobileScreen() ? false : open}>
 
-                    <Toolbar sx={{ pr: '24px' ,  borderBottom : "1px solid #ec5e69"}} >
+                    <Toolbar sx={{ pr: '24px', borderBottom : "1px solid #ec5e69"}} >
 
                         <div ref={elRef}>
-
                             <IconButton 
                                 edge="start" 
                                 color="inherit" 
                                 aria-label="open drawer" 
-                                onClick={ useCheckMobileScreen() ? MenuResponsive : toggleDrawer } 
+                                // onClick={ useCheckMobileScreen() ? MenuResponsive : toggleDrawer } 
+                                onClick={ toggleDrawer } 
                                 sx={{ marginRight: '36px', ...( !useCheckMobileScreen() && open && { display: 'none' }), }} >
                                 <MenuIcon  style={{
                                     background: '#ec5e69',
@@ -142,18 +142,6 @@ function DashboardContent() {
                                     color: "#fff"
                                 }}/>
                             </IconButton>
-
-
-
-                            <MenuMovil
-                                id="basic-menu"
-                                anchorEl={anchorElMovil}
-                                open={openMov}
-                                onClose={handleCloseMov}
-                                out={CerrarSession}
-                                MenuListProps={{ 'aria-labelledby': 'basic-button', }}
-                            />
-
                         </div>
 
                         <Typography component="h1" variant="h6" color="inherit" noWrap sx={{ flexGrow: 1 }} >

src/Components/Home/Candidato.jsx

@@ -1,6 +1,6 @@
 import { Skeleton, Box } from '@mui/material';
 import React from 'react'
-const big_as = 40
+const big_as = 37
 
 export function Candidato (props) {
     let { password,puesto,DPI, aplicacion,pendientes } = props.user

src/Components/Home/Candidatos.js

@@ -15,7 +15,7 @@ const USER_LENGTH = 120
 
 
 function Divide(arregloOriginal){
-    const LONGITUD_PEDAZOS = 6;
+    const LONGITUD_PEDAZOS = 8;
     let arregloDeArreglos = [];
     for (let i = 0; i < arregloOriginal.length; i += LONGITUD_PEDAZOS) {
         let pedazo = arregloOriginal.slice(i, i + LONGITUD_PEDAZOS);
@@ -101,7 +101,7 @@ export default function Candidatos () {
                         <Stack style={{ display : 'flex', flexDirection : 'row', alignItems: 'baseline'  }} spacing={2}>
                             <Typography style={{ paddingTop : 15, paddingRight : 10 }}>Page: {page}</Typography>
                             <Pagination 
-                                siblingCount={5} 
+                                siblingCount={4} 
                                 shape='rounded' 
                                 count={users.length} 
                                 page={page} 

src/Css/all.css

@@ -215,9 +215,8 @@ a.article:hover {
 }
 .content-section {
     background-color : #f1f1f1;
-    padding: 70px 50px;
     /* padding: 70px 50px; */
-    padding: 40px 0px;
+    padding: 50px 20px ;
 }
 .nav-item a i{
     color: #212529;