fix: responsiveness

src/components/CardContainer.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Box, Typography } from '@mui/material';
 
 export function CardContainer({
@@ -14,27 +15,16 @@ export function CardContainer({
   highlighted?: boolean;
 }) {
   return (
+    <Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
       <Box
         sx={{
+          marginInline: 'auto',
           width: '100%',
-        display: 'flex',
+          maxWidth: 'min(100%, 818px)',
-        justifyContent: 'center',
+          paddingInline: { xs: 2, sm: 3, md: 4 },
-        px: { xs: 2, sm: 3, md: 4 },
-      }}
-    >
-      <Box
-        sx={{
-          width: '100%',
-          maxWidth: {
-            xs: '100%',
-            sm: '500px',
-            md: '818px',
-          },
           display: 'flex',
           flexDirection: 'column',
           gap: 2,
-          mx: 'auto',
-          px: { xs: 2, sm: 3, md: 4 },
         }}
       >
         <Box
@@ -43,9 +33,7 @@ export function CardContainer({
             justifyContent: 'space-between',
             alignItems: { xs: 'flex-start', sm: 'center' },
             flexDirection: { xs: 'column', sm: 'row' },
-            backgroundColor: highlighted
+            bgcolor: highlighted ? 'primary.light' : 'background.default',
-              ? 'primary.light'
-              : 'background.default',
             p: 2,
             borderRadius: 1,
             gap: { xs: 1, sm: 0 },

src/components/CustomAlert.tsx

@@ -1,97 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Box, Alert, IconButton, type AlertColor } from '@mui/material';
-import {
-  TickCircle,
-  CloseSquare,
-  Warning2,
-  InfoCircle,
-  CloseCircle,
-} from 'iconsax-react';
-
-type AlertType = AlertColor;
-
-interface CustomAlertProps {
-  message: string;
-  onClose: () => void;
-  severity?: AlertType;
-  open: boolean;
-  duration?: number;
-  delayOnClose?: number;
-  rtl?: boolean;
-  icon?: React.ReactNode;
-}
-
-const defaultIcons: Record<AlertType, React.ReactNode> = {
-  success: <TickCircle size="20" color="#fff" />,
-  error: <CloseSquare size="20" color="#fff" />,
-  warning: <Warning2 size="20" color="#fff" />,
-  info: <InfoCircle size="20" color="#fff" />,
-};
-
-export const CustomAlert: React.FC<CustomAlertProps> = ({
-  message,
-  severity,
-  open,
-  onClose,
-  duration = 4000,
-  delayOnClose = 2000,
-  rtl = false,
-  icon,
-}) => {
-  const [visible, setVisible] = useState(open);
-
-  useEffect(() => {
-    setVisible(open);
-  }, [open]);
-
-  useEffect(() => {
-    if (visible && duration > 0) {
-      const timer = setTimeout(() => {
-        setVisible(false);
-        onClose();
-      }, duration);
-      return () => clearTimeout(timer);
-    }
-  }, [visible, duration, onClose]);
-
-  const handleClose = () => {
-    setTimeout(() => {
-      setVisible(false);
-      onClose();
-    }, delayOnClose);
-  };
-
-  if (!visible) return null;
-
-  return (
-    <Box
-      sx={{
-        position: 'fixed',
-        bottom: 20,
-        left: 20,
-        zIndex: 9999,
-      }}
-    >
-      <Alert
-        severity={severity}
-        variant="filled"
-        icon={icon ?? defaultIcons[severity ?? 'success']}
-        action={
-          <IconButton onClick={handleClose} sx={{ color: 'black', p: 0.5 }}>
-            <CloseCircle size="20" />
-          </IconButton>
-        }
-        sx={{
-          width: '396px',
-          flexDirection: 'row-reverse',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          textAlign: rtl ? 'right' : 'left',
-          direction: rtl ? 'rtl' : 'ltr',
-        }}
-      >
-        {message}
-      </Alert>
-    </Box>
-  );
-};

src/components/Toast.tsx

@@ -0,0 +1,23 @@
+import { Alert, Snackbar, type AlertColor } from '@mui/material';
+import React, { type PropsWithChildren } from 'react';
+
+export interface ToastProps extends PropsWithChildren {
+  color: AlertColor | undefined;
+  open: boolean;
+  onClose: () => void;
+}
+
+export const Toast = ({ color, open, onClose, children }: ToastProps) => {
+  return (
+    <Snackbar sx={{ minWidth: '396px' }} open={open} onClose={onClose}>
+      <Alert
+        onClose={onClose}
+        severity={color}
+        variant="filled"
+        sx={{ width: '100%' }}
+      >
+        {children}
+      </Alert>
+    </Snackbar>
+  );
+};

src/features/profile/components/PersonalInformation.tsx

@@ -1,5 +1,5 @@
+import React, { useState } from 'react';
 import { Box, Button } from '@mui/material';
-import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CardContainer } from '@/components/CardContainer';
 import { ProfileImage } from './personlInformation/ProfileImage';
@@ -38,15 +38,6 @@ export function PersonalInformation() {
   };
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'center',
-        width: '100%',
-        px: { xs: 1, sm: 2 },
-        backgroundColor: 'background.paper',
-      }}
-    >
     <CardContainer
       title={t('settingForm.titlePersonalInfo')}
       subtitle={t('settingForm.descriptionPersonalInfo')}
@@ -61,10 +52,7 @@ export function PersonalInformation() {
               sx={{
                 color: 'primary.main',
                 textTransform: 'none',
-                  width: {
+                width: { xs: '100%', sm: 'auto' },
-                    xs: '100%',
-                    sm: 'auto',
-                  },
                 fontSize: { xs: '0.85rem', sm: '1rem' },
               }}
             >
@@ -80,16 +68,11 @@ export function PersonalInformation() {
               border: '1px solid',
               borderColor: 'primary.main',
               borderRadius: '4px',
-                backgroundColor: isEditing
+              bgcolor: isEditing ? 'primary.main' : 'background.paper',
-                  ? 'primary.main'
-                  : 'background.paper',
               color: isEditing ? 'primary.contrastText' : 'primary.main',
               px: { xs: 2, sm: '22px' },
               py: { xs: '6px', sm: '8px' },
-                width: {
+              width: { xs: '100%', sm: isEditing ? '85px' : '93px' },
-                  xs: '100%',
-                  sm: isEditing ? '85px' : '93px',
-                },
               fontSize: { xs: '0.9rem', sm: '1rem' },
             }}
           >
@@ -107,8 +90,7 @@ export function PersonalInformation() {
           display: 'flex',
           flexDirection: 'column',
           gap: 2,
-            backgroundColor: 'background.paper',
+          bgcolor: 'background.paper',
-            // width: '754px',
         }}
       >
         {isEditing && (
@@ -126,6 +108,7 @@ export function PersonalInformation() {
             }}
           />
         )}
+
         {isEditing ? (
           <InfoRowEdit
             data={data}
@@ -142,6 +125,5 @@ export function PersonalInformation() {
         )}
       </Box>
     </CardContainer>
-    </Box>
   );
 }

src/features/profile/components/PhoneNumber.tsx

@@ -1,58 +1,27 @@
+import React, { useState, type ChangeEvent } from 'react';
 import { Box, Typography, Button, TextField, IconButton } from '@mui/material';
 import { Edit, Refresh, TickCircle } from 'iconsax-react';
-import { useState, type ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 import { CardContainer } from '@/components/CardContainer';
 import { CountDownTimer } from '@/components/CountDownTimer';
-import { useTranslation } from 'react-i18next';
+import { Toast } from '@/components/Toast';
-import { CustomAlert } from '@/components/CustomAlert';
 
 export function PhoneNumber() {
   const { t } = useTranslation('profileSetting');
   const [isEditing, setIsEditing] = useState(false);
   const [phoneNumber, setPhoneNumber] = useState('');
   const [verificationCode, setVerificationCode] = useState('');
-  const [showEmailAlert, setShowEmailAlert] = useState(false);
+  const [showToast, setShowToast] = useState(false);
   const [buttonState, setButtonState] = useState<'default' | 'counting'>(
     'default',
   );
   const [isVerifying, setIsVerifying] = useState(false);
   const [isVerified, setIsVerified] = useState(false);
 
-  const handleVerifyClick = () => {
-    if (!verificationCode || isVerifying) return;
-    handleVerifyCode();
-    setTimeout(() => {
-      setShowEmailAlert(true);
-    }, 1600);
-  };
-
   const [phones, setPhone] = useState([
-    {
+    { phone: '09123456789', time: '۱ ماه پیش', withCode: '+989123456789' },
-      phone: '09123456789',
-      time: '۱ ماه پیش',
-      withCode: '+989123456789',
-    },
   ]);
 
-  const handleSendCode = () => {
-    setButtonState('counting');
-    setIsVerified(false);
-  };
-
-  const handleVerifyCode = () => {
-    setIsVerifying(true);
-    setTimeout(() => {
-      setIsVerifying(false);
-      setIsVerified(true);
-      setShowEmailAlert(true);
-
-      const newPhone = '+98' + phoneNumber.slice(1);
-      setPhone([
-        { phone: phoneNumber, time: 'چند ثانیه پیش', withCode: newPhone },
-      ]);
-    }, 1500);
-  };
-
   const toggleEdit = () => {
     setIsEditing((prev) => {
       const enteringEditMode = !prev;
@@ -61,7 +30,7 @@ export function PhoneNumber() {
         setVerificationCode('');
         setIsVerified(false);
         setButtonState('default');
-        setShowEmailAlert(false);
+        setShowToast(false);
       }
       return enteringEditMode;
     });
@@ -77,16 +46,32 @@ export function PhoneNumber() {
     setVerificationCode(value);
   };
 
+  const handleSendCode = () => {
+    if (!phoneNumber) return;
+    setButtonState('counting');
+    setIsVerified(false);
+  };
+
+  const handleVerifyCode = () => {
+    setIsVerifying(true);
+    setTimeout(() => {
+      setIsVerifying(false);
+      setIsVerified(true);
+      setShowToast(true);
+      const newPhone = '+98' + phoneNumber.slice(1);
+      setPhone([
+        { phone: phoneNumber, time: 'چند ثانیه پیش', withCode: newPhone },
+      ]);
+    }, 1500);
+  };
+
+  const handleVerifyClick = () => {
+    if (!verificationCode || isVerifying) return;
+    handleVerifyCode();
+    setTimeout(() => setShowToast(true), 1600);
+  };
+
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'center',
-        width: '100%',
-        px: 2,
-        backgroundColor: 'background.paper',
-      }}
-    >
     <CardContainer
       title={t('settingForm.titlePhoneNumber')}
       subtitle={t('settingForm.descriptionPhoneNumber')}
@@ -116,11 +101,9 @@ export function PhoneNumber() {
               border: '1px solid',
               borderColor: 'primary.main',
               borderRadius: '4px',
-                backgroundColor: isEditing
+              bgcolor: isEditing ? 'primary.main' : 'background.paper',
-                  ? 'primary.main'
-                  : 'background.paper',
               color: isEditing ? 'primary.contrastText' : 'primary.main',
-                width: isEditing ? '85px' : '161px',
+              width: { xs: '100%', sm: isEditing ? '85px' : '161px' },
               whiteSpace: 'nowrap',
             }}
           >
@@ -132,16 +115,14 @@ export function PhoneNumber() {
       }
     >
       {isEditing ? (
-          <Box
+        <Box sx={{ px: { xs: 2, sm: 4 }, bgcolor: 'background.paper' }}>
-            sx={{ px: { xs: 2, sm: 4 }, backgroundColor: 'background.paper' }}
-          >
           <Box sx={{ mb: 2 }}>
             <Typography variant="h6">
               {t('settingForm.editPhoneNumber')}
             </Typography>
             <Typography variant="body2" color="text.secondary">
-                {t('settingForm.phoneNumberText')}(
+              {t('settingForm.phoneNumberText')}({phones.map((p) => p.withCode)}
-                {phones.map((p) => p.withCode)}){t('settingForm.verb')}
+              ){t('settingForm.verb')}
             </Typography>
           </Box>
 
@@ -150,7 +131,7 @@ export function PhoneNumber() {
               display: 'flex',
               flexWrap: 'wrap',
               gap: 2,
-                height: '88px',
+              alignItems: 'center',
             }}
           >
             <TextField
@@ -159,12 +140,9 @@ export function PhoneNumber() {
               type="tel"
               value={phoneNumber}
               onChange={handlePhoneNumberChange}
-                sx={{ flex: 1, minWidth: '250px', mb: 2 }}
+              sx={{ flex: '1 1 240px', minWidth: 0 }}
               placeholder="09123456789"
-                inputProps={{
+              inputProps={{ dir: 'rtl', style: { textAlign: 'right' } }}
-                  dir: 'rtl',
-                  style: { textAlign: 'right' },
-                }}
               InputProps={{
                 endAdornment:
                   buttonState === 'counting' ? (
@@ -183,13 +161,7 @@ export function PhoneNumber() {
             />
 
             {isVerified ? (
-                <Box
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 1,
-                  }}
-                >
                 <TickCircle
                   size="24"
                   style={{ color: '#43A047' }}
@@ -200,7 +172,6 @@ export function PhoneNumber() {
                 </Typography>
               </Box>
             ) : (
-                <Box sx={{}}>
               <Button
                 variant="text"
                 onClick={handleSendCode}
@@ -209,9 +180,9 @@ export function PhoneNumber() {
                 }
                 sx={{
                   textTransform: 'none',
-                      minWidth: '170px',
+                  minWidth: { xs: '100%', sm: 170 },
                   color: 'primary.main',
-                      height: '56px',
+                  height: 56,
                 }}
               >
                 {buttonState === 'counting' ? (
@@ -223,7 +194,6 @@ export function PhoneNumber() {
                   t('settingForm.verificationCodeButton')
                 )}
               </Button>
-                </Box>
             )}
           </Box>
 
@@ -234,7 +204,7 @@ export function PhoneNumber() {
                 flexWrap: 'wrap',
                 gap: 2,
                 mt: 2,
-                  height: '88px',
+                alignItems: 'center',
               }}
             >
               <TextField
@@ -243,12 +213,9 @@ export function PhoneNumber() {
                 type="tel"
                 value={verificationCode}
                 onChange={handleVerificationCodeChange}
-                  sx={{ flex: 1, minWidth: '250px' }}
+                sx={{ flex: '1 1 240px', minWidth: 0 }}
                 placeholder={t('settingForm.verificationCode')}
-                  inputProps={{
+                inputProps={{ dir: 'rtl', style: { textAlign: 'right' } }}
-                    dir: 'rtl',
-                    style: { textAlign: 'right' },
-                  }}
               />
 
               <Button
@@ -257,9 +224,9 @@ export function PhoneNumber() {
                 disabled={isVerifying || verificationCode.length === 0}
                 sx={{
                   textTransform: 'none',
-                    minWidth: '170px',
+                  minWidth: { xs: '100%', sm: 170 },
-                    backgroundColor: 'primary.main',
+                  bgcolor: 'primary.main',
-                    height: '56px',
+                  height: 56,
                 }}
               >
                 {isVerifying ? (
@@ -282,15 +249,14 @@ export function PhoneNumber() {
               </Button>
             </Box>
           )}
-            <CustomAlert
+
-              message={t('settingForm.successfulChangePhone')}
+          <Toast
-              rtl
+            color="success"
-              open={showEmailAlert}
+            open={showToast}
-              onClose={() => setShowEmailAlert(false)}
+            onClose={() => setShowToast(false)}
-              severity="success"
+          >
-              duration={4000}
+            {t('settingForm.successfulChangePhone')}
-              delayOnClose={2000}
+          </Toast>
-            />
         </Box>
       ) : (
         <Box sx={{ px: { xs: 2, sm: 4 } }}>
@@ -301,7 +267,7 @@ export function PhoneNumber() {
                 display: 'flex',
                 flexDirection: 'column',
                 justifyContent: 'center',
-                  height: '148px',
+                py: 2,
                 width: '100%',
               }}
             >
@@ -316,6 +282,5 @@ export function PhoneNumber() {
         </Box>
       )}
     </CardContainer>
-    </Box>
   );
 }

src/features/profile/components/SocialMedia.tsx

@@ -1,12 +1,4 @@
-import {
+import React, { useState } from 'react';
-  Google,
-  Apple,
-  Sms,
-  Trash,
-  CloseSquare,
-  Message,
-  ArrowDown3,
-} from 'iconsax-react';
 import {
   Box,
   Button,
@@ -20,10 +12,21 @@ import {
   MenuItem,
   ListItemIcon,
   ListItemText,
+  useMediaQuery,
 } from '@mui/material';
-import React, { useState } from 'react';
+import type { Theme } from '@mui/material/styles';
-import { CardContainer } from '@/components/CardContainer';
 import { useTranslation } from 'react-i18next';
+import { CardContainer } from '@/components/CardContainer';
+
+import {
+  Google,
+  Apple,
+  Sms,
+  Trash,
+  CloseSquare,
+  Message,
+  ArrowDown3,
+} from 'iconsax-react';
 
 export function SocialMedia() {
   const { t } = useTranslation('profileSetting');
@@ -32,14 +35,17 @@ export function SocialMedia() {
   const [emailError, setEmailError] = useState(false);
   const [anchor, setAnchor] = useState<null | HTMLElement>(null);
   const openMenu = Boolean(anchor);
+  const fullScreen = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down('sm'),
+  );
 
   const handleOpenDialog = () => setOpenDialog(true);
   const handleCloseDialog = () => setOpenDialog(false);
 
-  const handleClickMenu = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handleClickMenu = (e: React.MouseEvent<HTMLButtonElement>) =>
     setAnchor(e.currentTarget);
-  };
   const handleCloseMenu = () => setAnchor(null);
+
   const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setEmailInput(value);
@@ -49,18 +55,10 @@ export function SocialMedia() {
   const emailList = [
     { email: 'emailtemp@email.com', provider: 'email', time: '1 ماه پیش' },
     { email: 'emailtemp@gmail.com', provider: 'google', time: '1 ماه پیش' },
-  ];
+    { email: 'emailtemp@icloud.com', provider: 'apple', time: '1 ماه پیش' },
+  ] as const;
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        justifyContent: 'center',
-        width: '100%',
-        px: 2,
-        backgroundColor: 'background.paper',
-      }}
-    >
     <CardContainer
       title={t('settingForm.titleSocial')}
       subtitle={t('settingForm.descriptionSocial')}
@@ -87,7 +85,7 @@ export function SocialMedia() {
               variant="outlined"
               sx={{
                 width: '100%',
-                  maxWidth: { sm: '187px' },
+                maxWidth: { sm: 187 },
                 textTransform: 'none',
                 border: '1px solid',
                 borderColor: 'primary.main',
@@ -122,9 +120,12 @@ export function SocialMedia() {
             onClose={handleCloseMenu}
             PaperProps={{
               sx: {
-                  width: anchor ? `${anchor.offsetWidth}px` : undefined,
+                minWidth: 240,
+                maxWidth: '90vw',
               },
             }}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+            transformOrigin={{ vertical: 'top', horizontal: 'left' }}
           >
             <MenuItem
               onClick={() => {
@@ -153,13 +154,7 @@ export function SocialMedia() {
         </Box>
       }
     >
-        <Box
+      <Box sx={{ width: '100%', borderRadius: '8px', p: { xs: 1, sm: 2 } }}>
-          sx={{
-            width: '100%',
-            borderRadius: '8px',
-            p: { xs: 1, sm: 2 },
-          }}
-        >
         {emailList.map((item, index) => (
           <Box
             key={index}
@@ -172,7 +167,14 @@ export function SocialMedia() {
               gap: 1,
             }}
           >
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+                minWidth: 0,
+              }}
+            >
               {item.provider === 'google' && (
                 <Google size="20" variant="Bold" color="#4285F4" />
               )}
@@ -182,13 +184,17 @@ export function SocialMedia() {
               {item.provider === 'email' && (
                 <Sms size="20" variant="Bold" color="#1976d2" />
               )}
-                <Box>
+
-                  <Typography variant="h6">{item.email}</Typography>
+              <Box sx={{ minWidth: 0 }}>
+                <Typography variant="h6" noWrap>
+                  {item.email}
+                </Typography>
                 <Typography variant="caption" color="text.secondary">
                   {item.time}
                 </Typography>
               </Box>
             </Box>
+
             <IconButton size="small">
               <Trash size="20" color="gray" variant="Outline" />
             </IconButton>
@@ -201,6 +207,10 @@ export function SocialMedia() {
         onClose={handleCloseDialog}
         fullWidth
         maxWidth="xs"
+        fullScreen={fullScreen}
+        sx={{
+          '& .MuiDialog-paper': { m: { xs: 1, sm: 'auto' }, borderRadius: 2 },
+        }}
       >
         <DialogTitle
           sx={{
@@ -217,6 +227,7 @@ export function SocialMedia() {
           </IconButton>
           {t('settingForm.addEmailButton')}
         </DialogTitle>
+
         <DialogContent>
           <Box
             sx={{
@@ -234,6 +245,7 @@ export function SocialMedia() {
                 {t('settingForm.dialogHeader')}
               </Typography>
             </Box>
+
             <TextField
               fullWidth
               type="email"
@@ -243,31 +255,24 @@ export function SocialMedia() {
               helperText={emailError ? t('settingForm.emailError') : ''}
               label={t('settingForm.email')}
               placeholder="abc@email.com"
-                sx={{
+              sx={{ '& .MuiOutlinedInput-root': { borderRadius: '8px' } }}
-                  '& .MuiOutlinedInput-root': {
-                    borderRadius: '8px',
-                  },
-                }}
             />
+
             <Button
               variant="contained"
               fullWidth
-                sx={{
+              sx={{ textTransform: 'none', borderRadius: '8px' }}
-                  textTransform: 'none',
-                  borderRadius: '8px',
-                  // backgroundColor: '#1976d2',
-                }}
               disabled={emailError || emailInput === ''}
             >
               {t('settingForm.verificationCodeButton')}
             </Button>
 
             <Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
-                <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
+              <Box sx={{ flex: 1, height: 1, bgcolor: '#ccc' }} />
               <Typography sx={{ mx: 1, fontSize: '12px', color: 'gray' }}>
                 {t('settingForm.or')}
               </Typography>
-                <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
+              <Box sx={{ flex: 1, height: 1, bgcolor: '#ccc' }} />
             </Box>
 
             <Box
@@ -290,7 +295,11 @@ export function SocialMedia() {
                   justifyContent: 'center',
                 }}
               >
-                  <Google size="20" color="#4285F4" style={{ marginLeft: 8 }} />
+                <Google
+                  size="20"
+                  color="#4285F4"
+                  style={{ marginInlineStart: 8 }}
+                />
                 {t('settingForm.google')}
               </Button>
               <Button
@@ -306,7 +315,11 @@ export function SocialMedia() {
                   justifyContent: 'center',
                 }}
               >
-                  <Apple size="20" color="black" style={{ marginLeft: 8 }} />
+                <Apple
+                  size="20"
+                  color="black"
+                  style={{ marginInlineStart: 8 }}
+                />
                 {t('settingForm.apple')}
               </Button>
             </Box>
@@ -314,6 +327,5 @@ export function SocialMedia() {
         </DialogContent>
       </Dialog>
     </CardContainer>
-    </Box>
   );
 }

src/features/profile/components/UserForm.tsx

@@ -1,13 +1,14 @@
+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>
   );
 }