fix: responsiveness of sideNav component

src/features/profile/components/security/PasswordSecurity.tsx

@@ -19,6 +19,7 @@ import { PasswordValidationItem } from './PasswordValidation';
 import { Toast } from '@/components/Toast';
 import Logo from '@/components/Logo';
 import { CardContainer } from '@/components/CardContainer';
+import { PageWrapper } from '../PageWrapper';
 
 export function PasswordSecurity() {
   const theme = useTheme();
@@ -70,14 +71,7 @@ export function PasswordSecurity() {
   }, [password, validPassword]);
 
   return (
-    <Box
-      sx={{
-        mx: 'auto',
-        backgroundColor: 'background.paper',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
+    <PageWrapper>
       <Box sx={{ display: 'flex', alignItems: 'center', py: 2, height: 84 }}>
         <Logo />
       </Box>
@@ -148,7 +142,6 @@ export function PasswordSecurity() {
               </Typography>
             )}
           </Box>
-
           <Dialog
             open={open}
             onClose={handleClose}
@@ -198,7 +191,6 @@ export function PasswordSecurity() {
                   onChange={(e) => setPassword(e.target.value)}
                   sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
                 />
-
                 {password && showValidation && (
                   <Box sx={{ display: 'flex', justifyContent: 'center' }}>
                     <Box sx={{ maxWidth: '364px', width: '100%' }}>
@@ -221,7 +213,6 @@ export function PasswordSecurity() {
                     </Box>
                   </Box>
                 )}
-
                 <TextField
                   label={t('securityForm.confirmPassword')}
                   type="password"
@@ -257,7 +248,6 @@ export function PasswordSecurity() {
                     mt: 2,
                   }}
                 />
-
                 {password && showValidation && (
                   <Box sx={{ display: 'flex', justifyContent: 'center' }}>
                     <Box sx={{ maxWidth: '364px', width: '100%' }}>
@@ -280,7 +270,6 @@ export function PasswordSecurity() {
                     </Box>
                   </Box>
                 )}
-
                 <TextField
                   label={t('securityForm.confirmPassword')}
                   type="password"
@@ -325,7 +314,6 @@ export function PasswordSecurity() {
               </Button>
             </DialogActions>
           </Dialog>
-
           <Toast
             color="success"
             open={showPasswordAlert}
@@ -335,6 +323,6 @@ export function PasswordSecurity() {
           </Toast>
         </Box>
       </CardContainer>
-    </Box>
+    </PageWrapper>
   );
 }