мобильная адаптация

src/kitUI/Cart/Cart.tsx

@@ -11,7 +11,7 @@ import {
     Alert,
     Checkbox,
     FormControlLabel,
-    useTheme
+    useTheme, useMediaQuery
 } from "@mui/material";
 import Input from "@kitUI/input";
 import { useState } from "react";
@@ -29,6 +29,7 @@ import { currencyFormatter } from "@root/utils/currencyFormatter";
 
 export default function Cart() {
     const theme = useTheme();
+    const mobile = useMediaQuery(theme.breakpoints.down(400));
     let discounts = useDiscountStore(state => state.discounts);
     const cartData = useCartStore((store) => store.cartData);
     const tariffs = useTariffStore(state => state.tariffs);
@@ -84,6 +85,7 @@ export default function Cart() {
                     alignItems: "center",
                     justifyContent: "space-between",
                     gap: "20px",
+                    flexDirection: mobile ? "column" : undefined
                 }}
             >
                 <FormControlLabel
@@ -143,7 +145,7 @@ export default function Cart() {
                         padding: "3px",
                         display: "flex",
                         flexDirection: "column",
-                        ml: "auto",
+                        ml: mobile ? 0 : "auto",
                     }}
                 >
                     <Input

src/pages/Authorization/signin.tsx

@@ -8,7 +8,7 @@ import {
   Checkbox,
   Typography,
   FormControlLabel,
-  Button,
+  Button, useMediaQuery,
 } from "@mui/material";
 import Logo from "@pages/Logo";
 import OutlinedInput from "@kitUI/outlinedInput";
@@ -44,7 +44,7 @@ function validate(values: Values) {
 const SigninForm = () => {
   const theme = useTheme();
   const navigate = useNavigate();
-
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
   const initialValues: Values = {
     email: "",
     password: "",
@@ -99,6 +99,7 @@ const SigninForm = () => {
                 "> *": {
                   marginTop: "15px",
                 },
+                padding: isMobile ? "0 16px" : undefined
               }}
             >
               <Logo />

src/pages/Setting/FormCreateRoles.tsx

@@ -1,14 +1,14 @@
 import { useState } from "react";
 
 import {
-  Button,
+    Button,
-  Checkbox,
+    Checkbox,
-  FormControl,
+    FormControl,
-  ListItemText,
+    ListItemText,
-  MenuItem,
+    MenuItem,
-  Select,
+    Select,
-  SelectChangeEvent,
+    SelectChangeEvent,
-  TextField,
+    TextField, useMediaQuery, useTheme,
 } from "@mui/material";
 import { MOCK_DATA_USERS } from "@root/api/roles";
 
@@ -24,7 +24,8 @@ const MenuProps = {
 
 export default function CreateForm() {
   const [personName, setPersonName] = useState<string[]>([]);
-
+    const theme = useTheme();
+    const mobile = useMediaQuery(theme.breakpoints.down(400));
   const handleChange = (event: SelectChangeEvent<typeof personName>) => {
     const {
       target: { value },
@@ -39,7 +40,7 @@ export default function CreateForm() {
         fullWidth
         sx={{
           alignItems: "center",
-          width: "400px",
+          width: mobile ? "320px" : "400px",
           "& .MuiInputBase-root": {
             backgroundColor: "#F2F3F7",
             height: "48px",

src/pages/Setting/SettingRoles.tsx

@@ -1,4 +1,14 @@
-import { AccordionDetails, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
+import {
+    AccordionDetails,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    Typography,
+    useMediaQuery,
+    useTheme
+} from "@mui/material";
 
 import { CustomWrapper } from "@root/kitUI/CustomWrapper";
 
@@ -9,15 +19,19 @@ import { PrivilegesWrapper } from "./PrivilegiesWrapper";
 import theme from "../../theme";
 
 export const SettingRoles = (): JSX.Element => {
+    const theme = useTheme();
+    const mobile = useMediaQuery(theme.breakpoints.down(400));
   return (
-    <AccordionDetails sx={{ width: "890px" }}>
+    <AccordionDetails sx={{ maxWidth: "890px",
+        width: "100%", }}>
       <CustomWrapper
         text="Роли"
         children={
           <>
             <Table
               sx={{
-                width: "890px",
+                maxWidth: "890px",
+                width: "100%",
                 border: "2px solid",
                 borderColor: "gray",
               }}

src/pages/dashboard/Content/DiscountManagement/ControlPanel.tsx

@@ -1,6 +1,6 @@
 import { enqueueSnackbar } from "notistack";
 import { GridSelectionModel } from "@mui/x-data-grid";
-import { Box, Button } from "@mui/material";
+import {Box, Button, useMediaQuery, useTheme} from "@mui/material";
 
 import { changeDiscount } from "@root/api/discounts";
 import { findDiscountsById } from "@root/stores/discounts";
@@ -11,6 +11,8 @@ interface Props {
   selectedRows: GridSelectionModel;
 }
 export default function DiscountDataGrid({ selectedRows }: Props) {
+  const theme = useTheme();
+  const mobile = useMediaQuery(theme.breakpoints.down(400));
   const changeData = async (isActive: boolean) => {
     let done = 0;
     let fatal = 0;
@@ -46,7 +48,13 @@ export default function DiscountDataGrid({ selectedRows }: Props) {
   };
 
   return (
-    <Box width="400px" display="flex" justifyContent="space-between">
+    <Box
+        sx={{
+          width: mobile ? "250px" : "400px",
+          display: "flex",
+          justifyContent: "space-between",
+          flexDirection: mobile ? "column" : undefined,
+          gap: "10px"}}>
       <Button onClick={() => changeData(false)}>Активировать</Button>
       <Button onClick={() => changeData(true)}>Деактивировать</Button>
     </Box>

src/pages/dashboard/Content/Tariffs/CreateTariff.tsx

@@ -187,6 +187,7 @@ export default function CreateTariff() {
                               data-cy={`select-option-${privilege.description}`}
                               key={privilege.description}
                               value={privilege._id}
+                              sx={{whiteSpace: "normal", wordBreak: "break-world"}}
                           >
                             {privilege.serviceKey}:{privilege.description}
                           </MenuItem>

src/pages/dashboard/Content/Users.tsx

@@ -159,7 +159,7 @@ const Users: React.FC = () => {
             {accordionText}
           </Typography>
         </AccordionSummary>
-        <AccordionDetails>
+        <AccordionDetails sx={{overflowX: "auto"}}>
           <Table
             sx={{
               width: "100%",

src/pages/dashboard/Menu/index.tsx

@@ -172,9 +172,9 @@ const Navigation = (props: Props) => {
 };
 
 const Menu: React.FC = () => {
-  const tablet = useMediaQuery("(max-width:600px)");
+  const tablet = useMediaQuery("(max-width:900px)");
 
-  const mobile = useMediaQuery("(max-width:340px)");
+  const mobile = useMediaQuery("(max-width:600px)");
 
   const theme = useTheme();
   const [open, setOpen] = React.useState(tablet ? false : true);