feat(notice-actor-name): use truncated name when the length is over 20

also fixes PR-13 re: #4497
thematters · May 31, 2024 · d57757e · d57757e
1 parent 0f705cc
commit d57757e
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/src/components/Notice/NoticeActorName.tsx b/src/components/Notice/NoticeActorName.tsx
@@ -2,7 +2,7 @@ import gql from 'graphql-tag'
 import Link from 'next/link'
 
 import { TEST_ID } from '~/common/enums'
-import { toPath } from '~/common/utils'
+import { toPath, truncate } from '~/common/utils'
 import { NoticeActorNameUserFragment } from '~/gql/graphql'
 
 import styles from './styles.module.css'
@@ -27,7 +27,9 @@ const NoticeActorName = ({
         className={styles.displayName}
         data-test-id={TEST_ID.NOTICE_USER_DISPLAY_NAME}
       >
-        {user.displayName}
+        {user.displayName && user.displayName.length > 20
+          ? truncate(user.displayName, 8, 8)
+          : user.displayName}
       </a>
     </Link>
   )