fix: responsiveness

src/App.tsx

@@ -19,7 +19,7 @@ function App() {
       <CssBaseline />
       <LanguageManager />
       <UserForm />
-      <div style={{ padding: '16px' }}>
+      {/* <div style={{ padding: '16px' }}>
         <Typography variant="h3">{t('helloWorld')}</Typography>
         <Box
           sx={{ display: 'flex', flexDirection: 'column', gap: '10px', mt: 5 }}
@@ -42,24 +42,24 @@ function App() {
             error
           </Alert>
         </Box>
-      </div>
+      </div> */}
     </>
   );
 }
 
 export default App;
 
-import { Button } from '@mui/material';
+// import { Button } from '@mui/material';
 
-export const ThemeToggleButton = () => {
-  const { mode, setMode } = useColorScheme();
+// export const ThemeToggleButton = () => {
+//   const { mode, setMode } = useColorScheme();
 
-  return (
-    <Button
-      variant="contained"
-      onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
-    >
-      Switch to {mode === 'light' ? 'Dark' : 'Light'} Mode
-    </Button>
-  );
-};
+//   return (
+//     <Button
+//       variant="contained"
+//       onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
+//     >
+//       Switch to {mode === 'light' ? 'Dark' : 'Light'} Mode
+//     </Button>
+//   );
+// };

src/components/Countries.tsx

@@ -0,0 +1,40 @@
+// components/Countries.ts
+
+export interface Country {
+  name: string;
+  fa: string;
+  flag: string;
+}
+
+export const countries: Country[] = [
+  { name: 'Afghanistan', fa: 'افغانستان', flag: 'af' },
+  { name: 'Albania', fa: 'آلبانی', flag: 'al' },
+  { name: 'Algeria', fa: 'الجزایر', flag: 'dz' },
+  { name: 'Argentina', fa: 'آرژانتین', flag: 'ar' },
+  { name: 'Armenia', fa: 'ارمنستان', flag: 'am' },
+  { name: 'Australia', fa: 'استرالیا', flag: 'au' },
+  { name: 'Austria', fa: 'اتریش', flag: 'at' },
+  { name: 'Bahrain', fa: 'بحرین', flag: 'bh' },
+  { name: 'Canada', fa: 'کانادا', flag: 'ca' },
+  { name: 'China', fa: 'چین', flag: 'cn' },
+  { name: 'France', fa: 'فرانسه', flag: 'fr' },
+  { name: 'Germany', fa: 'آلمان', flag: 'de' },
+  { name: 'India', fa: 'هند', flag: 'in' },
+  { name: 'Iran', fa: 'ایران', flag: 'ir' },
+  { name: 'Iraq', fa: 'عراق', flag: 'iq' },
+  { name: 'Italy', fa: 'ایتالیا', flag: 'it' },
+  { name: 'Japan', fa: 'ژاپن', flag: 'jp' },
+  { name: 'Netherlands', fa: 'هلند', flag: 'nl' },
+  { name: 'Pakistan', fa: 'پاکستان', flag: 'pk' },
+  { name: 'Qatar', fa: 'قطر', flag: 'qa' },
+  { name: 'Russia', fa: 'روسیه', flag: 'ru' },
+  { name: 'Saudi Arabia', fa: 'عربستان سعودی', flag: 'sa' },
+  { name: 'Spain', fa: 'اسپانیا', flag: 'es' },
+  { name: 'Sweden', fa: 'سوئد', flag: 'se' },
+  { name: 'Switzerland', fa: 'سوئیس', flag: 'ch' },
+  { name: 'Turkey', fa: 'ترکیه', flag: 'tr' },
+  { name: 'United Arab Emirates', fa: 'امارات متحده عربی', flag: 'ae' },
+  { name: 'United Kingdom', fa: 'بریتانیا', flag: 'gb' },
+  { name: 'United States', fa: 'ایالات متحده آمریکا', flag: 'us' },
+  { name: 'Yemen', fa: 'یمن', flag: 'ye' },
+];

src/features/profile/components/personlInformation/InfoRowDisplay.tsx

@@ -13,32 +13,24 @@ export function InfoRowDisplay({
   initials: string;
 }) {
   const { t } = useTranslation('profileSetting');
-
   const displayValue = (value: string) =>
     value?.trim() || t('settingForm.notDetermined');
 
   return (
-    <>
+    <Box sx={{ px: 2, mb: 2 }}>
       <Box
         sx={{
           display: 'flex',
           flexDirection: { xs: 'column', sm: 'row' },
           flexWrap: 'wrap',
           alignItems: { xs: 'flex-start', sm: 'center' },
-          gap: { xs: 2, sm: 1 },
-          px: 2,
-          mb: 2,
+          gap: 2,
+          justifyContent: 'space-between',
+          width: '690px',
         }}
       >
         <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            width: '337px',
-            // maxWidth: '337px',
-            flexWrap: 'wrap',
-            gap: 2,
-          }}
+          sx={{ display: 'flex', alignItems: 'center', gap: 2, width: '337px' }}
         >
           <Avatar
             src={uploadedImageUrl || undefined}
@@ -61,7 +53,7 @@ export function InfoRowDisplay({
           </Box>
         </Box>
 
-        <Box>
+        <Box sx={{ display: 'flex', flexDirection: 'column', width: '337px' }}>
           <Typography variant="caption" color="text.secondary">
             {t('settingForm.country')}
           </Typography>
@@ -75,7 +67,8 @@ export function InfoRowDisplay({
           flexDirection: { xs: 'column', sm: 'row' },
           flexWrap: 'wrap',
           gap: 2,
-          px: 6,
+          mt: 2,
+          width: '690px',
         }}
       >
         <DisplayField
@@ -87,6 +80,6 @@ export function InfoRowDisplay({
           value={displayValue(data.nationalCode)}
         />
       </Box>
-    </>
+    </Box>
   );
 }