fix text overflowing issue in app nav user menu (#1136)

https://linear.app/clickhouse/issue/HDX-1800/emailname-text-overflows-app-nav

.changeset/rotten-trains-burn.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Resolved overflow issue and enhanced color contrast in nav bar profile section.

packages/app/src/AppNav.components.tsx

@@ -9,6 +9,7 @@ import {
   Menu,
   Paper,
   Text,
+  Tooltip,
   UnstyledButton,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
@@ -75,6 +76,8 @@ export const AppNavUserMenu = ({
     .map(name => name[0].toUpperCase())
     .join('');
 
+  const displayName = IS_LOCAL_MODE ? 'Local mode' : userName;
+
   return (
     <Menu position="top-start" transitionProps={{ transition: 'fade-up' }}>
       <Menu.Target>
@@ -96,24 +99,46 @@ export const AppNavUserMenu = ({
             </Avatar>
             {!isCollapsed && (
               <>
-                <div style={{ flex: 1 }}>
-                  <Text size="xs" fw="bold" lh={1.1} c="gray.3">
-                    {IS_LOCAL_MODE ? 'Local mode' : userName}
-                  </Text>
-                  <Text
-                    size="xs"
-                    c="dimmed"
-                    style={{
-                      fontSize: 11,
-                      maxWidth: '100%',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      maxHeight: 16,
-                    }}
-                  >
-                    {teamName}
-                  </Text>
-                </div>
+                <Tooltip
+                  fz="xs"
+                  color="gray"
+                  ta="center"
+                  label={
+                    <>
+                      <strong>{displayName}</strong>
+                      <br />
+                      {teamName}
+                    </>
+                  }
+                  openDelay={250}
+                >
+                  <div style={{ flex: 1, overflow: 'hidden' }}>
+                    <Text
+                      size="xs"
+                      fw="bold"
+                      lh={1.1}
+                      style={{
+                        maxWidth: '100%',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                      }}
+                    >
+                      {displayName}
+                    </Text>
+                    <Text
+                      size="xs"
+                      style={{
+                        fontSize: 11,
+                        maxWidth: '100%',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        maxHeight: 16,
+                      }}
+                    >
+                      {teamName}
+                    </Text>
+                  </div>
+                </Tooltip>
                 <Icon name="chevron-right" className="fs-8 text-slate-400" />
               </>
             )}