From 0cd199531ee1685e99de3bd53dfb5a370abc5462 Mon Sep 17 00:00:00 2001
From: Koosha Lahouti <koosha@Kooshas-MacBook-Air.local>
Date: Thu, 25 Sep 2025 18:00:48 +0330
Subject: [PATCH] fix: gap in menu of country code selector

---
 .npmrc                                        |  2 --
 src/components/{Layout => layout}/Header.tsx  |  0
 src/components/{Layout => layout}/Layout.tsx  |  0
 src/components/{Layout => layout}/Toolbar.tsx |  0
 .../{Layout => layout}/buildNavItems.tsx      |  0
 src/components/{Layout => layout}/type.ts     |  0
 .../components/CountryCodeSelector.tsx        | 34 +++++++++----------
 7 files changed, 16 insertions(+), 20 deletions(-)
 delete mode 100644 .npmrc
 rename src/components/{Layout => layout}/Header.tsx (100%)
 rename src/components/{Layout => layout}/Layout.tsx (100%)
 rename src/components/{Layout => layout}/Toolbar.tsx (100%)
 rename src/components/{Layout => layout}/buildNavItems.tsx (100%)
 rename src/components/{Layout => layout}/type.ts (100%)

diff --git a/.npmrc b/.npmrc
deleted file mode 100644
index a864f7a..0000000
--- a/.npmrc
+++ /dev/null
@@ -1,2 +0,0 @@
-@rkheftan:registry=https://npm.pkg.github.com
-//npm.pkg.github.com/:_authToken=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
\ No newline at end of file
diff --git a/src/components/Layout/Header.tsx b/src/components/layout/Header.tsx
similarity index 100%
rename from src/components/Layout/Header.tsx
rename to src/components/layout/Header.tsx
diff --git a/src/components/Layout/Layout.tsx b/src/components/layout/Layout.tsx
similarity index 100%
rename from src/components/Layout/Layout.tsx
rename to src/components/layout/Layout.tsx
diff --git a/src/components/Layout/Toolbar.tsx b/src/components/layout/Toolbar.tsx
similarity index 100%
rename from src/components/Layout/Toolbar.tsx
rename to src/components/layout/Toolbar.tsx
diff --git a/src/components/Layout/buildNavItems.tsx b/src/components/layout/buildNavItems.tsx
similarity index 100%
rename from src/components/Layout/buildNavItems.tsx
rename to src/components/layout/buildNavItems.tsx
diff --git a/src/components/Layout/type.ts b/src/components/layout/type.ts
similarity index 100%
rename from src/components/Layout/type.ts
rename to src/components/layout/type.ts
diff --git a/src/features/profile/components/CountryCodeSelector.tsx b/src/features/profile/components/CountryCodeSelector.tsx
index c965239..5796faa 100644
--- a/src/features/profile/components/CountryCodeSelector.tsx
+++ b/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={{
-                      minHeight: '48px',
-                      '&.Mui-selected': {
-                        backgroundColor: 'action.selected',
-                      },
-                    }}
+                    sx={{ justifyContent: 'space-between' }}
                   >
-                    <ListItemIcon>
-                      <ReactCountryFlag
-                        countryCode={country.code}
-                        svg
-                        style={{ height: '1.125rem', width: '1.125rem' }}
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                      <ListItemIcon sx={{ minWidth: 'auto' }}>
+                        <ReactCountryFlag
+                          countryCode={country.code}
+                          svg
+                          style={{ height: '1.125rem', width: '1.125rem' }}
+                        />
+                      </ListItemIcon>
+                      <ListItemText
+                        primary={t(country.label, { ns: 'country' })}
                       />
-                    </ListItemIcon>
-                    <ListItemText
-                      primary={t(country.label, { ns: 'country' })}
-                    />
+                    </Box>
+
                     <Typography color="text.secondary">
                       <LTRBox>{country.phone}</LTRBox>
                     </Typography>
                   </MenuItem>
                 )}
-                computeItemKey={(_, country) => country.code}
+                computeItemKey={(_, c) => c.code}
               />
             )}
           </Box>