From 6e2cffb58c2f6302441d4d46fb7bc4170c33e2f6 Mon Sep 17 00:00:00 2001
From: sophiecra <77420992+sophiecra@users.noreply.github.com>
Date: Thu, 13 Apr 2023 13:10:06 -0400
Subject: [PATCH 1/3] fix: truncate username in notifications

---
 .../Sidebar/panels/Notifications/Notification.tsx     |  2 +-
 components/ui/UsernameLink.tsx                        | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/components/Sidebar/panels/Notifications/Notification.tsx b/components/Sidebar/panels/Notifications/Notification.tsx
index 14541a88..74e02220 100644
--- a/components/Sidebar/panels/Notifications/Notification.tsx
+++ b/components/Sidebar/panels/Notifications/Notification.tsx
@@ -29,7 +29,7 @@ const Notification = ({
         </h4>
         <h5 className="text-xs text-primary">{timestamp}</h5>
       </header>
-      <p className="text-primary">{body}</p>
+      <p className="text-primary text-ellipsis overflow-hidden">{body}</p>
       <div className="card-actions justify-end">
         <DismissButton notificationId={notificationId} />
       </div>
diff --git a/components/ui/UsernameLink.tsx b/components/ui/UsernameLink.tsx
index 0764afef..9143abe7 100644
--- a/components/ui/UsernameLink.tsx
+++ b/components/ui/UsernameLink.tsx
@@ -7,9 +7,14 @@ const UsernameLink = ({
   username: string;
   children?: React.ReactNode;
 }) => (
-  <Link className="link link-hover link-primary" href={`/profile/${username}`}>
-    {children ?? username}
-  </Link>
+  <h5 className="link-primary text-ellipsis overflow-hidden">
+    <Link
+      className="link link-hover link-primary"
+      href={`/profile/${username}`}
+    >
+      {children ?? username}
+    </Link>
+  </h5>
 );
 
 export default UsernameLink;

From bcd2bccc4bc9f8d2c14739b6890ccf7e8b0f5d9b Mon Sep 17 00:00:00 2001
From: sophiecra <77420992+sophiecra@users.noreply.github.com>
Date: Tue, 18 Apr 2023 09:04:51 -0400
Subject: [PATCH 2/3] fix: merge conflicts

---
 components/ui/UsernameLink.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/ui/UsernameLink.tsx b/components/ui/UsernameLink.tsx
index ad502a79..99e39a6e 100644
--- a/components/ui/UsernameLink.tsx
+++ b/components/ui/UsernameLink.tsx
@@ -7,14 +7,14 @@ const UsernameLink = ({
   username: string;
   children?: React.ReactNode;
 }) => (
-<h5 className="link-primary text-ellipsis overflow-hidden">
-  <Link
-    className="link link-hover link-primary"
-    href={`/app/profile/${username}`}
-  >
-    {children ?? username}
-  </Link>
-</h5>
+  <h5 className="link-primary text-ellipsis overflow-hidden">
+    <Link
+      className="link link-hover link-primary"
+      href={`/app/profile/${username}`}
+    >
+      {children ?? username}
+    </Link>
+  </h5>
 );
 
 export default UsernameLink;

From ae23125cfd36a6a5d09d22ee5796240c84be6cbd Mon Sep 17 00:00:00 2001
From: sophiecra <77420992+sophiecra@users.noreply.github.com>
Date: Thu, 20 Apr 2023 08:38:14 -0400
Subject: [PATCH 3/3] fix: truncate display name on profile

---
 components/profile/ProfileHead.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/profile/ProfileHead.tsx b/components/profile/ProfileHead.tsx
index 7a95a718..7ff49aa2 100644
--- a/components/profile/ProfileHead.tsx
+++ b/components/profile/ProfileHead.tsx
@@ -18,11 +18,20 @@ const ProfileHead = ({
       <ProfileImage username={username} isProfilePage hideLink />
     </a>
     <div className="flex flex-col">
-      <h2 className="normal-case font-bold">
-        {!displayName || username === displayName
-          ? username
-          : `${displayName} — ${username}`}
-      </h2>
+      {!displayName || username === displayName ? (
+        <h2 className="normal-case font-bold overflow-hidden text-ellipsis">
+          {username}
+        </h2>
+      ) : (
+        <div className="flex flex-col min-w-[200px] lg:max-w-[700px] md:max-w-[500px] sm:max-w-[300px]">
+          <h2 className="normal-case font-bold overflow-hidden text-ellipsis">
+            {displayName}
+          </h2>
+          <h2 className="normal-case font-bold overflow-hidden text-ellipsis">
+            {username}
+          </h2>
+        </div>
+      )}
       {followers && (
         <h3 className="normal-case">{formatNumber(followers)} followers</h3>
       )}