fix: styles

src/features/profile/routes/SettingPage.tsx

@@ -185,26 +185,28 @@ export function Layout() {
     <Box
       sx={{
         minHeight: '100vh',
+        width: '100vw',
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        px: '185px',
+        px: { xs: 0, sm: 0, md: '185px' },
-        py: '105px',
+        py: { xs: 0, sm: 0, md: '105px' },
         boxSizing: 'border-box',
         backgroundColor: 'background.default',
       }}
     >
       <Box
-        width={1100}
+        width={{ xs: '100vw', md: 1100 }}
-        height={800}
+        height={{ xs: '100vh', md: 800 }}
         display="flex"
         flexDirection="column"
         bgcolor="background.paper"
         overflow="hidden"
-        borderRadius={2}
+        borderRadius={{ xs: 0, md: 2 }}
+        boxShadow={{ xs: 0, md: 3 }}
       >
         {!isMdUp && (
-          <AppBar position="static">
+          <AppBar position="static" elevation={0}>
             <Toolbar sx={{ backgroundColor: 'background.paper' }}>
               <IconButton edge="start" onClick={() => setDrawerOpen(true)}>
                 <Menu size={24} color="#1976d2" variant="Bold" />
@@ -215,7 +217,12 @@ export function Layout() {
 
         <Box sx={{ flexGrow: 1, display: 'flex', overflow: 'hidden' }}>
           {isMdUp && (
-            <Box sx={{ width: navWidthMd, flexShrink: 0 }}>
+            <Box
+              sx={{
+                width: navWidthMd,
+                flexShrink: 0,
+              }}
+            >
               <SideNav
                 navConfig={navConfig}
                 header={<Header />}
@@ -229,9 +236,9 @@ export function Layout() {
           <Box
             sx={{
               flexGrow: 1,
-              height: '100%',
               overflowY: 'auto',
-              px: 3,
+              px: { xs: 2, sm: 3 },
+              py: { xs: 2, sm: 3 },
             }}
           >
             <Outlet />