feat: truncate long avatar names (#1792)

* feat: avatar length handling

Signed-off-by: Adam Setch <[email protected]>

* feat: avatar length handling

Signed-off-by: Adam Setch <[email protected]>

* feat: avatar length handling

Signed-off-by: Adam Setch <[email protected]>

* feat: avatar length handling

Signed-off-by: Adam Setch <[email protected]>

---------

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/avatars/AvatarWithFallback.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import { useState } from 'react';
 
 import { FeedPersonIcon, MarkGithubIcon } from '@primer/octicons-react';
-import { Avatar, Stack, Text } from '@primer/react';
+import { Avatar, Stack, Truncate } from '@primer/react';
 
 import { type Link, Size } from '../../types';
 import type { UserType } from '../../typesGitHub';
@@ -34,7 +34,6 @@ export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
       align="center"
       gap="condensed"
       data-testid="avatar"
-      className="truncate"
     >
       {!src || isBroken ? (
         isNonHuman ? (
@@ -52,10 +51,9 @@ export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
         />
       )}
       {name && (
-        // TODO add truncation logic for long names
-        <Text className="block truncate flex-shrink overflow-ellipsis">
+        <Truncate title={name} inline maxWidth={280}>
           {name}
-        </Text>
+        </Truncate>
       )}
     </Stack>
   );