all sizes

packages/app/src/Element/Nip05.css

@@ -45,20 +45,23 @@
 
 .nip05 .badge {
   color: var(--highlight);
-  margin-left: 0.1em;
+  margin-left: 0.2em;
 }
 
-@media (max-width: 520px) {
+@media (max-width: 720px) {
+  .nip05 {
+    font-size: var(--font-size-small);
+  }
+}
+
+@media (max-width: 420px) {
+  .zap .pfp .display-name {
+    align-items: center;
+  }
   .nip05 .nick {
     display: none;
   }
   .nip05 .domain {
     display: none;
   }
-  .nip05 .badge svg {
-    width: 13px;
-    height: 13px;
-    margin-left: 0.15em;
-    margin-bottom: 1px;
-  }
 }

packages/app/src/Element/Note.css

@@ -199,7 +199,6 @@
 }
 
 .note .header .nip05 .badge {
-  margin-top: -0.2em;
   width: 13px;
   height: 13px;
 }

packages/app/src/Element/ProfileImage.css

@@ -32,13 +32,17 @@
 
 .pfp .display-name {
   display: flex;
-  flex-direction: row;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
-@media (min-width: 520px) {
+@media (max-width: 420px) {
   .pfp .display-name {
-    align-items: flex-start;
-    flex-direction: column;
+    font-size: var(--font-size-small);
+    flex-direction: row;
   }
 }
+
+.pfp .subheader .about {
+  max-width: calc(100vw - 140px);
+}

packages/app/src/Element/ProfileImage.tsx

@@ -32,7 +32,7 @@ export default function ProfileImage({
   const navigate = useNavigate();
   const user = useUserProfile(pubkey);
   const nip05 = defaultNip ? defaultNip : user?.nip05;
-  const { ref, width } = useClientWidth();
+  const width = useClientWidth();
 
   const name = useMemo(() => {
     return getDisplayName(user, pubkey);
@@ -43,7 +43,7 @@ export default function ProfileImage({
   }
 
   return (
-    <div className={`pfp${className ? ` ${className}` : ""}`} ref={ref}>
+    <div className={`pfp${className ? ` ${className}` : ""}`}>
       <div className="avatar-wrapper">
         <Avatar user={user} onClick={() => navigate(link ?? profileLink(pubkey))} />
       </div>
@@ -51,11 +51,11 @@ export default function ProfileImage({
         <div className="profile-name">
           <div className="username">
             <Link className="display-name" key={pubkey} to={link ?? profileLink(pubkey)}>
-              {name}
+              <div>{name}</div>
               {nip05 && <Nip05 nip05={nip05} pubkey={pubkey} verifyNip={verifyNip} />}
             </Link>
           </div>
-          <div className="subheader" style={{ width: width - 80 }}>
+          <div className="subheader" style={{ width: width - 190 }}>
             {subHeader}
           </div>
         </div>

packages/app/src/Element/Zap.css

@@ -87,3 +87,9 @@
 .zap.note .body {
   margin-bottom: 0;
 }
+
+@media (max-width: 420px) {
+  .zap .nip05 .badge {
+    margin: 0 0 0 0.3em;
+  }
+}

packages/app/src/Hooks/useClientWidth.tsx

@@ -1,13 +1,13 @@
 import { useRef, useState, useEffect } from "react";
 
 export default function useClientWidth() {
-  const ref = useRef<HTMLDivElement | null>(null);
+  const ref = useRef<HTMLDivElement | null>(document.querySelector(".page"));
   const [width, setWidth] = useState(0);
 
   useEffect(() => {
     const updateSize = () => {
       if (ref.current) {
-        setWidth(ref.current.clientWidth);
+        setWidth(ref.current.offsetWidth);
       }
     };
 
@@ -16,8 +16,5 @@ export default function useClientWidth() {
     return () => window.removeEventListener("resize", updateSize);
   }, [ref]);
 
-  return {
-    ref,
-    width,
-  };
+  return width;
 }

packages/app/src/Pages/ProfilePage.css

@@ -265,3 +265,10 @@
   font-weight: 500;
   font-size: 24px;
 }
+
+.profile .nip05 .nick {
+  display: unset;
+}
+.profile .nip05 .domain {
+  display: unset;
+}