From f5706b748762ce56ebf3e0499590d85b8f12cf3f Mon Sep 17 00:00:00 2001
From: Indigo Tang <indigoo@gmail.com>
Date: Sun, 6 Jul 2025 12:55:11 +0000
Subject: [PATCH] only show login name in dropdown menu, not beside the login
 button

---
 src/components/layout/Header.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index bfab99e..6b071d6 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -102,13 +102,22 @@ export default function Header() {
             {isMounted && isAuthenticated ? (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="sm" className="px-2 sm:px-3 capitalize">
-                    <UserCircle2 className="mr-2 h-4 w-4" />
-                    {userEmail?.split('@')[0]}
+                  <Button variant="ghost" size="icon" className="h-9 w-9 md:h-10 md:w-10">
+                    <UserCircle2 className="h-5 w-5" />
+                    <span className="sr-only">Open user menu</span>
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end">
-                  <DropdownMenuLabel className="truncate">{userEmail}</DropdownMenuLabel>
+                  <DropdownMenuLabel className="font-normal">
+                    <div className="flex flex-col space-y-1">
+                      <p className="text-sm font-medium leading-none capitalize">
+                        {userEmail?.split('@')[0]}
+                      </p>
+                      <p className="text-xs leading-none text-muted-foreground">
+                        {userEmail}
+                      </p>
+                    </div>
+                  </DropdownMenuLabel>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem asChild>
                     <Link href={`/${locale}/dashboard`}>