From ff4a97b9b4e4ece27b98be84edcb4b05608642a6 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Wed, 6 Mar 2024 14:43:59 +0100
Subject: [PATCH] fix(posts): limit display name character count

---
 src/components/post/post.tsx   | 3 ++-
 src/components/reply/reply.tsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index 607e3767..1eb7d54f 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -49,6 +49,7 @@ const PostAuthor = ({
   const isAuthorModerator = authorRole === 'moderator';
   const moderatorClass = `${isAuthorOwner ? styles.owner : isAuthorAdmin ? styles.admin : isAuthorModerator ? styles.moderator : ''}`;
   const authorRoleInitial = (isAuthorOwner && 'O') || (isAuthorAdmin && 'A') || (isAuthorModerator && 'M') || '';
+  const shortDisplayName = displayName?.length > 20 ? displayName?.slice(0, 20) + '...' : displayName;
 
   return (
     <>
@@ -60,7 +61,7 @@ const PostAuthor = ({
         ) : (
           <> </>
         )}
-        {displayName && <span className={`${styles.displayName} ${moderatorClass}`}>{displayName} </span>}
+        {displayName && <span className={`${styles.displayName} ${moderatorClass}`}>{shortDisplayName} </span>}
         <span className={`${styles.authorAddressWrapper} ${moderatorClass}`}>
           <span className={styles.authorAddressHidden}>u/{shortAddress || shortAuthorAddress}</span>
           <span className={`${styles.authorAddressVisible} ${authorAddressChanged && styles.authorAddressChanged}`}>u/{shortAuthorAddress}</span>
diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx
index a7e95ebf..3ba27802 100644
--- a/src/components/reply/reply.tsx
+++ b/src/components/reply/reply.tsx
@@ -39,6 +39,7 @@ const ReplyAuthor = ({ address, authorRole, cid, displayName, imageUrl, isAvatar
   const isAuthorModerator = authorRole === 'moderator';
   const authorRoleInitial = (isAuthorOwner && 'O') || (isAuthorAdmin && 'A') || (isAuthorModerator && 'M') || '';
   const moderatorClass = `${isAuthorOwner ? styles.owner : isAuthorAdmin ? styles.admin : isAuthorModerator ? styles.moderator : ''}`;
+  const shortDisplayName = displayName?.length > 20 ? displayName?.slice(0, 20) + '...' : displayName;
 
   return (
     <>
@@ -49,7 +50,7 @@ const ReplyAuthor = ({ address, authorRole, cid, displayName, imageUrl, isAvatar
       )}
       {displayName && (
         <Link to={`/u/${address}/c/${cid}`} className={`${styles.author} ${moderatorClass}`}>
-          {displayName}{' '}
+          {shortDisplayName}{' '}
         </Link>
       )}
       <Link to={`/u/${address}/c/${cid}`} className={`${styles.author} ${moderatorClass}`}>