src/components/username.tsx

@@ -65,13 +65,14 @@ export const UserComponent = ({ pubkey, name, image }: UserProps) => {
   const npub = hexToNpub(pubkey)
   const roboImage = `https://robohash.org/${npub}.png?set=set3`
 
+  const handleClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    e.stopPropagation()
+    navigate(getProfileRoute(pubkey))
+  }
+
   return (
     <Box
       sx={{ display: 'flex', alignItems: 'center', gap: '10px', flexGrow: 1 }}
-      onClick={(e) => {
-        e.stopPropagation()
-        navigate(getProfileRoute(pubkey))
-      }}
     >
       <img
         src={image || roboImage}
@@ -82,6 +83,7 @@ export const UserComponent = ({ pubkey, name, image }: UserProps) => {
           borderStyle: 'solid',
           borderColor: `#${pubkey.substring(0, 6)}`
         }}
+        onClick={handleClick}
       />
       <Typography
         component="label"
@@ -90,6 +92,7 @@ export const UserComponent = ({ pubkey, name, image }: UserProps) => {
           cursor: 'pointer',
           color: theme.palette.text.primary
         }}
+        onClick={handleClick}
       >
         {name}
       </Typography>