fix: responsiveness of setting page and correct the width and height size of those pages

src/features/profile/components/setting/Setting.tsx

@@ -59,6 +59,13 @@ export function Setting() {
 
   return (
     <PageWrapper>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: '100vh',
+        }}
+      >
         <Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
           <Logo />
         </Box>
@@ -187,7 +194,7 @@ export function Setting() {
                   )}
                 </Box>
               </Box>
-            <Box sx={{ mt: 2, width: '100%' }}>
+              <Box sx={{ mt: 2, width: { xs: '100%', md: '50%' } }}>
                 {isEditing ? (
                   <Autocomplete
                     options={calendarOptions}
@@ -211,6 +218,7 @@ export function Setting() {
             </Box>
           </CardContainer>
         </Box>
+      </Box>
     </PageWrapper>
   );
 }

src/features/profile/components/userInformation/UserForm.tsx

@@ -1,14 +0,0 @@
-import { Box } from '@mui/material';
-import { PersonalInformation } from './PersonalInformation';
-import { PhoneNumber } from './PhoneNumber';
-import { SocialMedia } from './SocialMedia';
-
-export function UserForm() {
-  return (
-    <Box sx={{ width: '100%', overflowX: 'clip' }}>
-      <PersonalInformation />
-      <PhoneNumber />
-      <SocialMedia />
-    </Box>
-  );
-}

src/features/profile/routes/SettingPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
   createBrowserRouter,
   RouterProvider,
@@ -71,7 +71,7 @@ export function Layout() {
   const [drawerOpen, setDrawerOpen] = useState(false);
 
   const contentMaxWidth = '100%';
-  const contentWidthMd = '810px';
+  // const contentWidthMd = '810px';
   const navWidthMd = '274px';
 
   const navConfig: NavItemConfig[] = [
@@ -183,29 +183,39 @@ export function Layout() {
 
   return (
     <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        px: '185px',
+        py: '105px',
+        boxSizing: 'border-box',
+        backgroundColor: 'background.default',
+      }}
+    >
+      <Box
+        width={1100}
+        height={800}
         display="flex"
         flexDirection="column"
-      justifyContent="center"
+        bgcolor="background.paper"
-      alignItems="center"
+        overflow="hidden"
-      minHeight="100vh"
+        borderRadius={2}
-      px={{ xs: 2, sm: 3 }}
       >
         {!isMdUp && (
           <AppBar position="static">
             <Toolbar sx={{ backgroundColor: 'background.paper' }}>
-            <IconButton
+              <IconButton edge="start" onClick={() => setDrawerOpen(true)}>
-              edge="start"
-              color="inherit"
-              onClick={() => setDrawerOpen(true)}
-            >
                 <Menu size={24} color="#1976d2" variant="Bold" />
               </IconButton>
             </Toolbar>
           </AppBar>
         )}
-      <Box display="flex" width="100%" maxWidth="100vw">
+
+        <Box sx={{ flexGrow: 1, display: 'flex', overflow: 'hidden' }}>
           {isMdUp && (
-          <Box flex="0 0 auto" width={navWidthMd} position="relative">
+            <Box sx={{ width: navWidthMd, flexShrink: 0 }}>
               <SideNav
                 navConfig={navConfig}
                 header={<Header />}
@@ -215,20 +225,19 @@ export function Layout() {
               />
             </Box>
           )}
+
           <Box
-          flexGrow={1}
-          width={1070}
-          maxWidth={1070}
-          height={{ xs: 'auto', md: '814px' }}
             sx={{
-            bgcolor: 'background.paper',
+              flexGrow: 1,
-            px: { xs: 2, sm: 3 },
+              height: '100%',
               overflowY: 'auto',
+              px: 3,
             }}
           >
             <Outlet />
           </Box>
         </Box>
+
         {!isMdUp && (
           <Drawer
             anchor="left"
@@ -246,6 +255,7 @@ export function Layout() {
           </Drawer>
         )}
       </Box>
+    </Box>
   );
 }