Fixed account card name

src/components/view/AccountCard.tsx

@@ -18,14 +18,14 @@ export default function AccountCard({
   return (
     <div className="absolute -left-16 right-16 bottom-0 h-20 w-[calc(100%+4rem-2rem)] z-10 ml-4 mb-4 @max-[150px]:hidden">
       <Card className="px-3 py-3 h-full w-full flex flex-row">
-        <div className="flex gap-2.5 items-center">
+        <div className="flex gap-2.5 items-center w-full">
           <Avatar className="h-full w-auto aspect-square">
             <AvatarImage src={account.avatar} />
             <AvatarFallback>{account.displayName[0]}</AvatarFallback>
           </Avatar>
-          <div className="flex flex-col">
+          <div className="flex flex-col w-full">
             <span
-              className="flex items-center gap-1.5 cursor-pointer"
+              className="flex items-center gap-1.5 cursor-pointer w-full"
               onClick={() => {
                 navigator.clipboard.writeText(
                   base58.encode(
@@ -34,13 +34,13 @@ export default function AccountCard({
                 );
               }}
             >
-              {account.displayName}
+              <p>{account.displayName}</p>
               <CopyIcon className="text-muted-foreground size-3" />
             </span>
             <span className="text-muted-foreground">Online</span>
           </div>
         </div>
-        <div className="ml-auto flex items-center text-muted-foreground">
+        <div className="flex items-center text-muted-foreground">
           <Button variant="ghost" className="size-10">
             <Settings2Icon className="size-5.5" />
           </Button>