fix: responsiveness

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>
   );
 }