fix: responsiveness

src/features/profile/components/PersonalInformation.tsx

@@ -42,6 +42,8 @@ export function PersonalInformation() {
       sx={{
         display: 'flex',
         justifyContent: 'center',
+        width: '100%',
+        px: { xs: 1, sm: 2 },
         backgroundColor: 'background.paper',
       }}
     >
@@ -50,7 +52,7 @@ export function PersonalInformation() {
         subtitle={t('settingForm.descriptionPersonalInfo')}
         highlighted={isEditing}
         action={
-          <Box sx={{ display: 'flex', gap: 1 }}>
+          <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
             {isEditing && (
               <Button
                 variant="text"
@@ -58,8 +60,12 @@ export function PersonalInformation() {
                 size="large"
                 sx={{
                   color: 'primary.main',
-                  width: '43px',
                   textTransform: 'none',
+                  width: {
+                    xs: '100%',
+                    sm: 'auto',
+                  },
+                  fontSize: { xs: '0.85rem', sm: '1rem' },
                 }}
               >
                 {t('settingForm.rejectButton')}
@@ -78,9 +84,13 @@ export function PersonalInformation() {
                   ? 'primary.main'
                   : 'background.paper',
                 color: isEditing ? 'primary.contrastText' : 'primary.main',
-                px: '22px',
-                py: '8px',
-                width: isEditing ? '85px' : '93px',
+                px: { xs: 2, sm: '22px' },
+                py: { xs: '6px', sm: '8px' },
+                width: {
+                  xs: '100%',
+                  sm: isEditing ? '85px' : '93px',
+                },
+                fontSize: { xs: '0.9rem', sm: '1rem' },
               }}
             >
               {isEditing

src/features/profile/components/PhoneNumber.tsx

@@ -4,21 +4,35 @@ import { useState, type ChangeEvent } from 'react';
 import { CardContainer } from '@/components/CardContainer';
 import { CountDownTimer } from '@/components/CountDownTimer';
 import { useTranslation } from 'react-i18next';
+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 [buttonState, setButtonState] = useState<'default' | 'counting'>(
     'default',
   );
   const [isVerifying, setIsVerifying] = useState(false);
   const [isVerified, setIsVerified] = useState(false);
 
-  const phones = [
-    { phone: '09123456789', time: '۱ ماه پیش', withCode: '+989123456789' },
-  ];
+  const handleVerifyClick = () => {
+    if (!verificationCode || isVerifying) return;
+    handleVerifyCode();
+    setTimeout(() => {
+      setShowEmailAlert(true);
+    }, 1600);
+  };
+
+  const [phones, setPhone] = useState([
+    {
+      phone: '09123456789',
+      time: '۱ ماه پیش',
+      withCode: '+989123456789',
+    },
+  ]);
 
   const handleSendCode = () => {
     setButtonState('counting');
@@ -30,14 +44,27 @@ export function PhoneNumber() {
     setTimeout(() => {
       setIsVerifying(false);
       setIsVerified(true);
+      setShowEmailAlert(true);
+
+      const newPhone = '+98' + phoneNumber.slice(1);
+      setPhone([
+        { phone: phoneNumber, time: 'چند ثانیه پیش', withCode: newPhone },
+      ]);
     }, 1500);
   };
 
   const toggleEdit = () => {
-    setIsEditing((prev) => !prev);
-    setButtonState('default');
-    setIsVerified(false);
-    setVerificationCode('');
+    setIsEditing((prev) => {
+      const enteringEditMode = !prev;
+      if (enteringEditMode) {
+        setPhoneNumber('');
+        setVerificationCode('');
+        setIsVerified(false);
+        setButtonState('default');
+        setShowEmailAlert(false);
+      }
+      return enteringEditMode;
+    });
   };
 
   const handlePhoneNumberChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -55,7 +82,7 @@ export function PhoneNumber() {
       sx={{
         display: 'flex',
         justifyContent: 'center',
-        alignItems: 'center',
+        width: '100%',
         px: 2,
         backgroundColor: 'background.paper',
       }}
@@ -165,7 +192,7 @@ export function PhoneNumber() {
                 >
                   <TickCircle
                     size="24"
-                    style={{ color: 'black' }}
+                    style={{ color: '#43A047' }}
                     variant="Bold"
                   />
                   <Typography sx={{ color: 'success.main' }}>
@@ -177,7 +204,9 @@ export function PhoneNumber() {
                   <Button
                     variant="text"
                     onClick={handleSendCode}
-                    disabled={buttonState === 'counting'}
+                    disabled={
+                      buttonState === 'counting' || phoneNumber.length === 0
+                    }
                     sx={{
                       textTransform: 'none',
                       minWidth: '170px',
@@ -221,9 +250,10 @@ export function PhoneNumber() {
                     style: { textAlign: 'right' },
                   }}
                 />
+
                 <Button
                   variant="contained"
-                  onClick={handleVerifyCode}
+                  onClick={handleVerifyClick}
                   disabled={isVerifying || verificationCode.length === 0}
                   sx={{
                     textTransform: 'none',
@@ -252,6 +282,15 @@ export function PhoneNumber() {
                 </Button>
               </Box>
             )}
+            <CustomAlert
+              message={t('settingForm.successfulChangePhone')}
+              rtl
+              open={showEmailAlert}
+              onClose={() => setShowEmailAlert(false)}
+              severity="success"
+              duration={4000}
+              delayOnClose={2000}
+            />
           </Box>
         ) : (
           <Box sx={{ px: { xs: 2, sm: 4 } }}>

src/features/profile/components/SocialMedia.tsx

@@ -56,7 +56,7 @@ export function SocialMedia() {
       sx={{
         display: 'flex',
         justifyContent: 'center',
-        alignItems: 'center',
+        width: '100%',
         px: 2,
         backgroundColor: 'background.paper',
       }}