responsive puestos style

src/App.css

@@ -90,7 +90,6 @@
 .actions_butons_plaza{
     display: flex;
     flex-direction: row;
-    flex-wrap: nowrap;
     align-content: center;
     justify-content: space-around;
     align-items: flex-start;

src/Components/Dashboard.js

@@ -248,12 +248,10 @@ function DashboardContent() {
                         {secondaryListItems}
                     </List>
                 </Drawer>
-                {/* <Box component="main" sx={{ backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900], flexGrow: 1, height: '100vh', overflow: 'auto', }} > */}
                     <Container maxWidth="lg" sx={{ mt: 2 , mb: 2 }}>
                         <Outlet/>
                         <Footer/>
                     </Container>
-                {/* </Box> */}
             </Box>
         </ThemeProvider>
     );

src/Components/Puestos/ListMode.jsx

@@ -1,11 +1,18 @@
 import {  Col, Button, Table } from 'react-bootstrap'
-import Zoom from '@mui/material/Zoom';
+import { Zoom, useMediaQuery as Size, TableCell  } from '@mui/material'
+
+import ShowI from '@mui/icons-material/Grading';
+import EditI from '@mui/icons-material/Edit';
+import Deletei from '@mui/icons-material/Delete';
 
 export function ListMode(props) {
     
     const opciones = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
     let { setEdit, setDelete, setShow, setPuesto, data, index, showing } = props;
 
+    const isMovil = Size('(min-width:770px)');
+    console.log("IS MOV:: ", isMovil)
+
     return(
         <Col md="12">
             <div className="body-table">
@@ -28,34 +35,43 @@ export function ListMode(props) {
                                             <td className="text-center">{ plaza.nombre }</td>
                                             <td className="text-center">{ plaza.description }</td>
                                             <td className="text-center">{ new Date( plaza.created ).toLocaleDateString('es-GT',opciones) }</td>
-                                            <td className="actions_butons_plaza"> 
+                                            <TableCell
+                                                sx={{
+                                                    "display":'flex',
+                                                    "flex-direction":'row',
+                                                    "justify-content": "space-between",
+                                                    "flex-wrap": !isMovil ? "wrap": "nowrap",
+                                                }} 
+                                                className="actions_butons_plaza"> 
                                                 <Button 
                                                     onClick={() => {
                                                         setPuesto(plaza) 
                                                         setShow(true)
                                                     }} 
-                                                    className="ver_producto">Ver
+                                                    className="ver_producto">
+                                                    {!isMovil ? <ShowI/> : "Ver"}
                                                 </Button>
-
                                                 <Button 
                                                     onClick={() => {
                                                         setPuesto(plaza) 
                                                         setEdit(true)
                                                     }} 
-                                                    className="editar_producto">Editar
+                                                    className="editar_producto">
+                                                    {!isMovil ? <EditI/> : "Editar"}
                                                 </Button>
                                                 <Button 
                                                     onClick={() => {
                                                         setPuesto(plaza) 
                                                         setDelete(true) 
                                                     }} 
-                                                    className="eliminar_producto">Eliminar
+                                                    className="eliminar_producto">
+                                                    {!isMovil ? <Deletei/> : "Eliminar"}
                                                 </Button>
-                                            </td>
+                                            </TableCell>
                                         </tr>
                                     </Zoom>
                                     )
-                            }) : <h1>no data bro</h1>
+                            }) : <span></span>
                         }
                     </tbody>
                     <tfoot>

src/Css/all.css

@@ -852,8 +852,9 @@ table.dataTable tbody th, table.dataTable tbody td {
     background-color: #fff;
     background-clip: padding-box;
     border: 1px solid rgba(0,0,0,.2);
-    border-radius: 2px;
+    border-radius: 5px;
     outline: 0;
+    margin-top:12%;
 }
 .custom-file-upload-hidden {
   display: none;
@@ -3520,7 +3521,7 @@ All this is done for any sub-level being entered.
     width: 100%;
 }
 .content-section {
-    padding: 40px 0px;
+    padding: 10px 0px;
 }
 .cabeceras {
     background: #f1f1f1;
@@ -3633,7 +3634,7 @@ All this is done for any sub-level being entered.
     width: 100%;
 }
 .content-section {
-    padding: 40px 0px;
+    padding: 10px 0px;
 }
 .cabeceras {
     background: #f1f1f1;