updates on the create order page ui changes

src/layout/MainLayout/index.js

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import { Outlet } from 'react-router-dom';
 
 // material-ui
@@ -22,6 +23,7 @@ const MainLayout = () => {
   const matchDownXL = useMediaQuery(theme.breakpoints.down('xl'));
   const downLG = useMediaQuery(theme.breakpoints.down('lg'));
 
+  const { drawerOpen } = useSelector((state) => state.menu);
   const { container, miniDrawer, menuOrientation } = useConfig();
 
   const isHorizontal = menuOrientation === MenuOrientation.HORIZONTAL && !downLG;
@@ -39,7 +41,14 @@ const MainLayout = () => {
     <Box sx={{ display: 'flex', width: '100%' }}>
       <Header />
       {!isHorizontal ? <Drawer /> : <HorizontalBar />}
-      <Box component="main" sx={{ width: 'calc(100% - 260px)', flexGrow: 1, p: { xs: 2, sm: 3 } }}>
+      <Box
+        component="main"
+        sx={{
+          width: isHorizontal ? '100%' : drawerOpen ? 'calc(100% - 260px)' : { xs: '100%', lg: 'calc(100% - 60px)' },
+          flexGrow: 1,
+          p: { xs: 2, sm: 3 }
+        }}
+      >
         <Toolbar sx={{ mt: isHorizontal ? 8 : 'inherit' }} />
         <Container
           // maxWidth={container ? 'xl' : false}