адаптация страницы настроек

src/pages/Setting/CardPrivilegie.tsx

@@ -1,6 +1,6 @@
 import { KeyboardEvent, useRef, useState } from "react";
 import { enqueueSnackbar } from "notistack";
-import { Box, IconButton, TextField, Tooltip, Typography } from "@mui/material";
+import {Box, IconButton, TextField, Tooltip, Typography, useMediaQuery, useTheme} from "@mui/material";
 import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined";
 import { PrivilegeWithAmount } from "@frontend/kitui";
 import { putPrivilege } from "@root/api/privilegies";
@@ -16,6 +16,8 @@ export const СardPrivilege = ({ privilege }: CardPrivilege) => {
   const [inputOpen, setInputOpen] = useState<boolean>(false);
   const [inputValue, setInputValue] = useState<string>("");
   const priceRef = useRef<HTMLDivElement>(null);
+  const theme = useTheme();
+  const mobile = useMediaQuery(theme.breakpoints.down(600));
 
   const translationType = {
     count: "за единицу",
@@ -24,6 +26,7 @@ export const СardPrivilege = ({ privilege }: CardPrivilege) => {
   };
 
   const putPrivileges = async () => {
+
     const [_, putedPrivilegeError] = await putPrivilege({
       name: privilege.name,
       privilegeId: privilege.privilegeId,
@@ -79,7 +82,7 @@ export const СardPrivilege = ({ privilege }: CardPrivilege) => {
       }}
     >
       <Box sx={{ display: "flex", borderRight: "1px solid gray" }}>
-        <Box sx={{ width: "200px", py: "25px" }}>
+        <Box sx={{ width: mobile ? "120px" : "200px", py: "25px" }}>
           <Typography
             variant="h6"
             sx={{
@@ -120,7 +123,7 @@ export const СardPrivilege = ({ privilege }: CardPrivilege) => {
           </IconButton>
         </Box>
       </Box>
-      <Box sx={{ width: "600px", display: "flex", justifyContent: "space-around" }}>
+      <Box sx={{ maxWidth: "600px", width: "100%", display: "flex", alignItems: mobile ? "center" : undefined, justifyContent: "space-around", flexDirection: mobile ? "column" : "row", gap: "5px" }}>
         {inputOpen ? (
           <TextField
             type="number"
@@ -130,7 +133,9 @@ export const СardPrivilege = ({ privilege }: CardPrivilege) => {
             onChange={(event) => setInputValue(event.target.value)}
             sx={{
               alignItems: "center",
-              width: "400px",
+              maxWidth: "400px",
+              width: "100%",
+              marginLeft: "5px",
               "& .MuiInputBase-root": {
                 backgroundColor: "#F2F3F7",
                 height: "48px",

src/pages/Setting/FormCreateRoles.tsx

@@ -25,7 +25,7 @@ const MenuProps = {
 export default function CreateForm() {
   const [personName, setPersonName] = useState<string[]>([]);
     const theme = useTheme();
-    const mobile = useMediaQuery(theme.breakpoints.down(400));
+    const mobile = useMediaQuery(theme.breakpoints.down(600));
   const handleChange = (event: SelectChangeEvent<typeof personName>) => {
     const {
       target: { value },
@@ -40,7 +40,8 @@ export default function CreateForm() {
         fullWidth
         sx={{
           alignItems: "center",
-          width: mobile ? "320px" : "400px",
+            maxWidth: "400px",
+            width: "100%",
           "& .MuiInputBase-root": {
             backgroundColor: "#F2F3F7",
             height: "48px",
@@ -55,8 +56,8 @@ export default function CreateForm() {
           },
         }}
       />
-      <Button sx={{ ml: "5px", bgcolor: "#fe9903", color: "white" }}>Отправить</Button>
+      <Button sx={{ ml: "5px", bgcolor: "#fe9903", color: "white", minWidth: "85px" }}>Отправить</Button>
-      <FormControl sx={{ ml: "25px", width: "80%" }}>
+      <FormControl sx={{ ml: mobile ? "10px" : "25px", width: "80%" }}>
         <Select
           sx={{ bgcolor: "white", height: "48px" }}
           labelId="demo-multiple-checkbox-label"

src/pages/Setting/FormDeleteRoles.tsx

@@ -55,7 +55,8 @@ export default function DeleteForm() {
         fullWidth
         sx={{
           alignItems: "center",
-          width: "400px",
+          maxWidth: "400px",
+          width: "100%",
           "& .MuiInputBase-root": {
             backgroundColor: "#F2F3F7",
             height: "48px",

src/pages/Setting/SettingRoles.tsx

@@ -20,7 +20,7 @@ import theme from "../../theme";
 
 export const SettingRoles = (): JSX.Element => {
     const theme = useTheme();
-    const mobile = useMediaQuery(theme.breakpoints.down(400));
+    const mobile = useMediaQuery(theme.breakpoints.down(600));
   return (
     <AccordionDetails sx={{ maxWidth: "890px",
         width: "100%", }}>
@@ -66,8 +66,10 @@ export const SettingRoles = (): JSX.Element => {
                     alignItems: "center",
                     borderTop: "2px solid",
                     borderColor: theme.palette.grayLight.main,
-                    height: "100px",
+                    height: mobile ? undefined : "100px",
                     cursor: "pointer",
+                    flexDirection: mobile ? "column" : "row",
+                    gap: "5px"
                   }}
                 >
                   <FormCreateRoles />
@@ -77,7 +79,8 @@ export const SettingRoles = (): JSX.Element => {
             <Table
               sx={{
                 mt: "30px",
-                width: "890px",
+                  maxWidth: "890px",
+                  width: "100%",
                 border: "2px solid",
                 borderColor: "gray",
               }}
@@ -112,8 +115,10 @@ export const SettingRoles = (): JSX.Element => {
                     alignItems: "center",
                     borderTop: "2px solid",
                     borderColor: theme.palette.grayLight.main,
-                    height: "100px",
+                      height: mobile ? undefined : "100px",
                       cursor: "pointer",
+                      flexDirection: mobile ? "column" : "row",
+                      gap: "5px"
                   }}
                 >
                   <FormDeleteRoles />
@@ -124,7 +129,8 @@ export const SettingRoles = (): JSX.Element => {
         }
       />
 
-      <PrivilegesWrapper text="Привилегии" sx={{ mt: "50px" }} />
+      <PrivilegesWrapper text="Привилегии" sx={{ mt: "50px", maxWidth: "890px",
+          width: "100%", }} />
     </AccordionDetails>
   );
 };