fix: gap in menu of country code selector

.npmrc

@@ -1,2 +0,0 @@
-@rkheftan:registry=https://npm.pkg.github.com
-//npm.pkg.github.com/:_authToken=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

src/features/profile/components/CountryCodeSelector.tsx

@@ -163,7 +163,7 @@ export function CountryCodeSelector({
             />
           </Box>
 
-          <Box sx={{ width: '100%', height: '16rem' }}>
+          <Box sx={{ width: '100%', height: '25rem' }}>
             {filteredCountries.length === 0 ? (
               <MenuItem disabled>
                 <ListItem>
@@ -176,35 +176,33 @@ export function CountryCodeSelector({
               <Virtuoso
                 style={{ height: '100%', width: '100%' }}
                 data={filteredCountries}
-                initialTopMostItemIndex={searchTerm ? 0 : initialIndex}
+                initialTopMostItemIndex={initialIndex}
                 itemContent={(_, country) => (
                   <MenuItem
                     key={country.code}
                     selected={country.phone === value}
                     onClick={() => handleSelect(country)}
-                    sx={{
+                    sx={{ justifyContent: 'space-between' }}
-                      minHeight: '48px',
-                      '&.Mui-selected': {
-                        backgroundColor: 'action.selected',
-                      },
-                    }}
                   >
-                    <ListItemIcon>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                      <ReactCountryFlag
+                      <ListItemIcon sx={{ minWidth: 'auto' }}>
-                        countryCode={country.code}
+                        <ReactCountryFlag
-                        svg
+                          countryCode={country.code}
-                        style={{ height: '1.125rem', width: '1.125rem' }}
+                          svg
+                          style={{ height: '1.125rem', width: '1.125rem' }}
+                        />
+                      </ListItemIcon>
+                      <ListItemText
+                        primary={t(country.label, { ns: 'country' })}
                       />
-                    </ListItemIcon>
+                    </Box>
-                    <ListItemText
+
-                      primary={t(country.label, { ns: 'country' })}
-                    />
                     <Typography color="text.secondary">
                       <LTRBox>{country.phone}</LTRBox>
                     </Typography>
                   </MenuItem>
                 )}
-                computeItemKey={(_, country) => country.code}
+                computeItemKey={(_, c) => c.code}
               />
             )}
           </Box>