fix(header): improve layout and text overflow handling in user info display

src/components/layout/Header.tsx

@@ -49,9 +49,9 @@ export const Header: React.FC = () => {
           height: (t) => t.spacing(10.5),
         }}
       >
-        <FlexBox sx={{ alignItems: 'center', gap: 1 }}>
+        <FlexBox sx={{ alignItems: 'center', gap: 1, flex: 1, minWidth: 0 }}>
           <Avatar
-            sx={{ width: 32, height: 32, fontSize: '14px' }}
+            sx={{ width: 32, height: 32, fontSize: '14px', flexShrink: 0 }}
             src={
               user.picture &&
               import.meta.env.VITE_IMAGE_BASE_URL + '/' + user.picture
@@ -59,18 +59,37 @@ export const Header: React.FC = () => {
           >
             {user.firstName.charAt(0) + ' ' + user.lastName.charAt(0)}
           </Avatar>
-          <Box>
+
-            <Typography variant="body1" color="textSecondary">
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Typography
+              variant="body1"
+              color="textSecondary"
+              noWrap
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
               {user.fullName}
             </Typography>
             {/* TODO: add ternary text color to palette */}
-            <LTRTypography variant="body2" color="#757575">
+            <LTRTypography
+              variant="body2"
+              color="#757575"
+              noWrap
+              textAlign="left"
+            >
               {user.phoneNumber ?? user.email}
             </LTRTypography>
           </Box>
         </FlexBox>
 
-        <IconButton onClick={handleClick} color="primary">
+        {/* RIGHT SIDE (FIXED) */}
+        <IconButton
+          onClick={handleClick}
+          color="primary"
+          sx={{ flexShrink: 0 }}
+        >
           <Icon Component={More} />
         </IconButton>
       </Box>