display name and nip05

src/element/ProfileImage.css

@@ -17,14 +17,18 @@
 
 .pfp a:hover {
     text-decoration: underline;
+    text-decoration-color: var(--gray-superlight);
+}
+
+.pfp .profile-name {
+  display: flex;
+  flex-direction: column;
+  font-weight: bold;
+  margin-bottom: .2em;
 }
 
 .pfp .nip05 {
   font-size: 16px;
   margin: 0;
-}
-
-.pfp .profile-name {
-  display: flex;
-  flex-direction: row;
+  margin-top: -.2em;
 }

src/element/ProfileImage.js

@@ -27,17 +27,18 @@ export default function ProfileImage({ pubkey, subHeader, showUsername = true, c
         <div className={`pfp ${className}`}>
             <LazyImage src={hasImage ? user.picture : Nostrich} onClick={() => navigate(link ?? profileLink(pubkey))} />
             {showUsername && (<div className="f-grow">
-                <div className="profile-name">
-                  <Link key={pubkey} to={link ?? profileLink(pubkey)}>
-                    {user?.nip05 ? (
+                <Link key={pubkey} to={link ?? profileLink(pubkey)}>
+                  <div className="profile-name">
+                    <div>{name}</div>
+                    {user?.nip05 && (
                         <Nip05
                           nip05={user.nip05}
                           pubkey={user.pubkey}
                           defaultUsername={user.display_name || user.name}
                         />
-                      ): name}
-                  </Link>
-                </div>
+                      )}
+                  </div>
+                </Link>
                 {subHeader ? <>{subHeader}</> : null}
             </div>
             )}