From 8d4b3c1c2c6d2a8b0c440e58b4e8dbded94450d6 Mon Sep 17 00:00:00 2001
From: Joel Lu <loophone@gmail.com>
Date: Thu, 9 Dec 2021 22:53:34 +1100
Subject: [PATCH] Fix user dropdown text overflow (#1283)

---
 components/Shell.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/components/Shell.tsx b/components/Shell.tsx
index e1792040..1cf38688 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -328,15 +328,14 @@ function UserDropdown({ small }: { small?: boolean }) {
   return (
     <Dropdown>
       <DropdownMenuTrigger asChild>
-        <div className="flex items-center space-x-2 cursor-pointer group">
-          <Avatar
-            imageSrc={user?.avatar || ""}
-            alt={user?.username || "Nameless User"}
-            className={classNames(small ? "w-8 h-8" : "w-10 h-10", "bg-gray-300 rounded-full flex-shrink-0")}
-          />
+        <div className="flex items-center space-x-2 cursor-pointer group w-full">
+          <span
+            className={classNames(small ? "w-8 h-8" : "w-10 h-10", "bg-gray-300 rounded-full flex-shrink-0")}>
+            <Avatar imageSrc={user?.avatar || ""} alt={user?.username || "Nameless User"} />
+          </span>
           {!small && (
-            <>
-              <span className="flex-grow text-sm">
+            <span className="flex flex-grow items-center truncate">
+              <span className="flex-grow text-sm truncate">
                 <span className="block font-medium text-gray-900 truncate">
                   {user?.username || "Nameless User"}
                 </span>
@@ -348,7 +347,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                 className="flex-shrink-0 w-5 h-5 text-gray-400 group-hover:text-gray-500"
                 aria-hidden="true"
               />
-            </>
+            </span>
           )}
         </div>
       </DropdownMenuTrigger>