fix: gap in menu of country code selector

src/components/layout/Header.tsx

@@ -0,0 +1,34 @@
+import { Box, IconButton, Typography } from '@mui/material';
+import { Icon } from '@rkheftan/harmony-ui';
+import { More } from 'iconsax-react';
+import type { UserInfo } from '@/contexts/AuthContext';
+import { LTRTypography } from '../common/LTRTypography';
+
+interface HeaderProps {
+  user: UserInfo;
+}
+
+export const Header: React.FC<HeaderProps> = ({ user }) => {
+  return (
+    <Box
+      sx={{
+        p: 2,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: (t) => t.spacing(10.5),
+      }}
+    >
+      <Box>
+        <Typography variant="body1">{user.fullName}</Typography>
+        <LTRTypography variant="body2" color="textSecondary">
+          {user.phoneNumber ?? user.email}
+        </LTRTypography>
+      </Box>
+
+      <IconButton>
+        <Icon Component={More} />
+      </IconButton>
+    </Box>
+  );
+};