адаптивность для страниц скидки и промокод

src/index.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Authorization from "./Components/Authorization";
-import Sections from "./Components/Sections";
-import LoggedIn from "./Components/LoggedIn";
-import Error404 from "./Components/Error404";
+import Authorization from "./pages/Authorization";
+import Sections from "./pages/Sections";
+import LoggedIn from "./pages/dashboard";
+import Error404 from "./pages/Error404";
 
 
 const container = document.getElementById('root');

src/pages/dashboard/Content/Discounts/index.tsx

@@ -15,6 +15,14 @@ import Select, { SelectChangeEvent } from "@mui/material/Select";
 import { PrivilegesProps, DiscountProps } from "./types";
 import useStore, { StoreState } from "../../../../store";
 import theme from "../../../../theme";
+import {styled} from "@mui/material/styles";
+
+
+const BoxButton = styled('div')(({ theme }) => ({
+  [theme.breakpoints.down(400)]: {
+    justifyContent: 'center'
+  },
+}));
 
 
 const columns: GridColDef[] = [
@@ -470,7 +478,7 @@ const Discounts: React.FC = () =>  {
             marginTop: "35px",
             backgroundColor: theme.palette.content.main
           }}>
-            <Table sx={{ minWidth: 650, }} aria-label="simple table">
+            <Table aria-label="simple table">
               <TableBody>
                 <TableRow sx={{ border: "1px solid white" }} >
                   <TableCell component="th" scope="row" sx={{ color: theme.palette.secondary.main }}>
@@ -498,10 +506,13 @@ const Discounts: React.FC = () =>  {
             Дата действия:
           </Typography>
           
-          <Box sx={{ 
-            width: "90%",
-            display: "flex"
-          }}>
+          <Box
+              sx={{
+                width: "100%",
+                display: "flex",
+                flexWrap: 'wrap'
+              }}
+          >
             <Typography sx={{
               width: "35px",
               display: "flex",
@@ -643,12 +654,15 @@ const Discounts: React.FC = () =>  {
           flexDirection: "column",
           justifyContent: "center",
           alignItems: "center",
+          width: '100%',
           marginTop: "45px"
         }}>
-          <Box sx={{ 
-            width: "420px",
+          <BoxButton sx={{
+            maxWidth: "420px",
+            width: '100%',
             display: "flex",
             justifyContent: "space-between",
+            flexWrap: 'wrap',
           }}>
             <Button 
               variant = "contained"
@@ -659,6 +673,7 @@ const Discounts: React.FC = () =>  {
                 height: "48px",
                 fontWeight: "normal",
                 fontSize: "17px",
+                marginBottom: '10px',
                 "&:hover": {
                   backgroundColor: theme.palette.grayMedium.main
                 }
@@ -681,7 +696,7 @@ const Discounts: React.FC = () =>  {
               }}>
                 Применить
             </Button>
-          </Box>
+          </BoxButton>
         </Box>
       
       </LocalizationProvider>

src/pages/dashboard/Content/Promocode/index.tsx

@@ -302,8 +302,9 @@ const Promocode: React.FC = () =>  {
           
           <Box
               sx={{
-                width: "90%",
-                display: "flex"
+                width: "100%",
+                display: "flex",
+                flexWrap: 'wrap'
               }}
           >
             <Typography sx={{

src/pages/dashboard/Content/index.tsx

@@ -38,7 +38,7 @@ const Content: React.FC<MWProps> = ({ section }) =>  {
         alignItems: "center",
         overflow: "auto",
         overflowY: "auto",
-        padding: "60px 0"
+        padding: "60px 5px"
       }}>
         
         { componentsArray[ section ] }

src/store.ts

@@ -1,8 +1,8 @@
 import create from "zustand";
 import { persist } from "zustand/middleware"
-import { ArrayProps } from "./Components/LoggedIn/Content/Tariffs/types";
-import { PromocodeProps } from "./Components/LoggedIn/Content/Promocode/types";
-import { DiscountProps } from "./Components/LoggedIn/Content/Discounts/types";
+import { ArrayProps } from "./pages/dashboard/Content/Tariffs/types";
+import { PromocodeProps } from "./pages/dashboard/Content/Promocode/types";
+import { DiscountProps } from "./pages/dashboard/Content/Discounts/types";
 
 
 const useStore = create<StoreState>()(