Fix user dropdown text overflow (#1283)

This commit is contained in:
Joel Lu 2021-12-09 22:53:34 +11:00 committed by GitHub
parent 22a6d6ee3b
commit 8d4b3c1c2c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

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