feat: ModalUser tablet styles

src/pages/dashboard/ModalUser/PurchaseTab.tsx

@@ -1,3 +1,4 @@
+import { Box } from "@mui/material";
 import { DataGrid } from "@mui/x-data-grid";
 
 import type { GridColDef } from "@mui/x-data-grid";
@@ -6,25 +7,33 @@ const COLUMNS: GridColDef[] = [
   {
     field: "date",
     headerName: "Дата",
-    width: 200,
+    minWidth: 130,
+    maxWidth: 200,
+    flex: 1,
     sortable: false,
   },
   {
     field: "time",
     headerName: "Время",
-    width: 180,
+    minWidth: 90,
+    maxWidth: 180,
+    flex: 1,
     sortable: false,
   },
   {
     field: "product",
     headerName: "Товар",
-    width: 280,
+    minWidth: 200,
+    maxWidth: 280,
+    flex: 1,
     sortable: false,
   },
   {
     field: "amount",
     headerName: "Кол-во",
-    width: 70,
+    minWidth: 70,
+    maxWidth: 70,
+    flex: 1,
     sortable: false,
   },
 ];
@@ -54,48 +63,62 @@ const ROWS = [
 ];
 
 export const PurchaseTab = () => (
-  <DataGrid
+  <Box
-    rows={ROWS}
-    columns={COLUMNS}
-    pageSize={5}
-    rowsPerPageOptions={[5]}
-    hideFooter
-    disableColumnMenu
-    disableSelectionOnClick
-    rowHeight={50}
-    headerHeight={50}
-    experimentalFeatures={{ newEditingApi: true }}
     sx={{
-      borderRadius: "0",
+      height: "100%",
-      border: "none",
+      padding: "0 25px",
-      "& .MuiDataGrid-columnHeaders": {
+      "&:before": {
-        padding: "0 25px",
+        content: '""',
+        height: "50px",
+        width: "100%",
+        position: "absolute",
+        left: "0",
+        top: "0",
         background: "#F2F3F7",
-        borderBottom: "none",
-      },
-      "& .MuiDataGrid-main .MuiDataGrid-columnHeader": {
-        outline: "none",
-      },
-      "& .MuiDataGrid-columnHeaderTitle": {
-        fontWeight: "bold",
-        userSelect: "none",
-      },
-      "& .MuiDataGrid-virtualScrollerRenderZone": {
-        width: "100%",
-      },
-      "& .MuiDataGrid-iconSeparator": { display: "none" },
-      "& .MuiDataGrid-main .MuiDataGrid-cell": {
-        outline: "none",
-        border: "none",
-        justifyContent: "flex-start",
-      },
-      "& .MuiDataGrid-row": {
-        padding: "0 25px",
-        width: "100%",
-        "&:hover": {
-          background: "#F2F3F7",
-        },
       },
     }}
-  />
+  >
+    <DataGrid
+      rows={ROWS}
+      columns={COLUMNS}
+      pageSize={5}
+      rowsPerPageOptions={[5]}
+      hideFooter
+      disableColumnMenu
+      disableSelectionOnClick
+      rowHeight={50}
+      headerHeight={50}
+      experimentalFeatures={{ newEditingApi: true }}
+      sx={{
+        borderRadius: "0",
+        border: "none",
+        "& .MuiDataGrid-columnHeaders": {
+          background: "#F2F3F7",
+          borderBottom: "none",
+        },
+        "& .MuiDataGrid-main .MuiDataGrid-columnHeader": {
+          outline: "none",
+        },
+        "& .MuiDataGrid-columnHeaderTitle": {
+          fontWeight: "bold",
+          userSelect: "none",
+        },
+        "& .MuiDataGrid-virtualScrollerRenderZone": {
+          width: "100%",
+        },
+        "& .MuiDataGrid-iconSeparator": { display: "none" },
+        "& .MuiDataGrid-main .MuiDataGrid-cell": {
+          outline: "none",
+          border: "none",
+          justifyContent: "flex-start",
+        },
+        "& .MuiDataGrid-row": {
+          width: "100%",
+          "&:hover": {
+            background: "#F2F3F7",
+          },
+        },
+      }}
+    />
+  </Box>
 );

src/pages/dashboard/ModalUser/index.tsx

@@ -8,6 +8,8 @@ import {
   Typography,
   Tabs,
   Tab,
+  useTheme,
+  useMediaQuery,
 } from "@mui/material";
 
 import { UserTab } from "./UserTab";
@@ -54,6 +56,9 @@ const ModalUser = () => {
   const [value, setValue] = useState<number>(0);
   const { userId } = useParams();
   const { makeRequest } = authStore();
+  const theme = useTheme();
+  const tablet = useMediaQuery(theme.breakpoints.down(1070));
+  const mobile = useMediaQuery(theme.breakpoints.down(700));
 
   useEffect(() => {
     makeRequest<never, Verification>({
@@ -85,7 +90,7 @@ const ModalUser = () => {
               display: "flex",
               flexDirection: "column",
               width: "100%",
-              maxWidth: "1070px",
+              maxWidth: tablet ? "920px" : "1070px",
               height: "605px",
               bgcolor: theme.palette.background.default,
               color: theme.palette.secondary.main,
@@ -148,6 +153,7 @@ const ModalUser = () => {
 
               <Box
                 sx={{
+                  position: "relative",
                   width: "100%",
                   color: theme.palette.common.black,
                   boxShadow: "inset 30px 0px 40px 0px rgba(210, 208, 225, 0.2)",