polish widget code

src/shared/widgets/nostrBandUserProfile.tsx

@@ -72,77 +72,79 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
   }
 
   return (
-    <div className="rounded-xl bg-white/10 px-5 py-5 backdrop-blur-xl">
-      <div className="flex items-center justify-between">
-        <div className="inline-flex items-center gap-2">
-          <Image
-            src={profile.picture}
-            className="h-11 w-11 shrink-0 rounded-lg object-cover"
-          />
-          <div className="inline-flex flex-col gap-1">
-            <h3 className="max-w-[15rem] truncate font-semibold leading-none text-white">
-              {profile.display_name || profile.name}
-            </h3>
-            <p className="max-w-[10rem] truncate text-sm leading-none text-white/50">
-              {profile.nip05 || shortenKey(data.pubkey)}
-            </p>
+    <div className="h-min w-full px-3 pb-3">
+      <div className="rounded-xl bg-white/10 px-5 py-5 backdrop-blur-xl">
+        <div className="flex items-center justify-between">
+          <div className="inline-flex items-center gap-2">
+            <Image
+              src={profile.picture}
+              className="h-11 w-11 shrink-0 rounded-lg object-cover"
+            />
+            <div className="inline-flex flex-col gap-1">
+              <h3 className="max-w-[15rem] truncate font-semibold leading-none text-white">
+                {profile.display_name || profile.name}
+              </h3>
+              <p className="max-w-[10rem] truncate text-sm leading-none text-white/50">
+                {profile.nip05 || shortenKey(data.pubkey)}
+              </p>
+            </div>
+          </div>
+          <div className="inline-flex items-center gap-2">
+            {followed ? (
+              <button
+                type="button"
+                onClick={() => unfollowUser(data.pubkey)}
+                className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
+              >
+                <UnfollowIcon className="h-4 w-4" />
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={() => followUser(data.pubkey)}
+                className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
+              >
+                <FollowIcon className="h-4 w-4" />
+              </button>
+            )}
           </div>
         </div>
-        <div className="inline-flex items-center gap-2">
-          {followed ? (
-            <button
-              type="button"
-              onClick={() => unfollowUser(data.pubkey)}
-              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
-            >
-              <UnfollowIcon className="h-4 w-4" />
-            </button>
+        <div className="mt-2">
+          <p className="whitespace-pre-line break-words text-white">
+            {profile.about || profile.bio}
+          </p>
+        </div>
+        <div className="mt-8">
+          {status === 'loading' ? (
+            <p>Loading...</p>
           ) : (
-            <button
-              type="button"
-              onClick={() => followUser(data.pubkey)}
-              className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-white/10 text-white backdrop-blur-xl hover:bg-fuchsia-500 hover:text-white"
-            >
-              <FollowIcon className="h-4 w-4" />
-            </button>
+            <div className="flex w-full items-center gap-8">
+              <div className="inline-flex flex-col gap-1">
+                <span className="font-semibold leading-none text-white">
+                  {userStats.stats[data.pubkey].followers_pubkey_count ?? 0}
+                </span>
+                <span className="text-sm leading-none text-white/50">Followers</span>
+              </div>
+              <div className="inline-flex flex-col gap-1">
+                <span className="font-semibold leading-none text-white">
+                  {userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0}
+                </span>
+                <span className="text-sm leading-none text-white/50">Following</span>
+              </div>
+              <div className="inline-flex flex-col gap-1">
+                <span className="font-semibold leading-none text-white">
+                  {userStats.stats[data.pubkey].zaps_received
+                    ? compactNumber.format(
+                        userStats.stats[data.pubkey].zaps_received.msats / 1000
+                      )
+                    : 0}
+                </span>
+                <span className="text-sm leading-none text-white/50">Zaps received</span>
+              </div>
+            </div>
           )}
         </div>
       </div>
-      <div className="mt-2">
-        <p className="whitespace-pre-line break-words text-white">
-          {profile.about || profile.bio}
-        </p>
-      </div>
-      <div className="mt-8">
-        {status === 'loading' ? (
-          <p>Loading...</p>
-        ) : (
-          <div className="flex w-full items-center gap-8">
-            <div className="inline-flex flex-col gap-1">
-              <span className="font-semibold leading-none text-white">
-                {userStats.stats[data.pubkey].followers_pubkey_count ?? 0}
-              </span>
-              <span className="text-sm leading-none text-white/50">Followers</span>
-            </div>
-            <div className="inline-flex flex-col gap-1">
-              <span className="font-semibold leading-none text-white">
-                {userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0}
-              </span>
-              <span className="text-sm leading-none text-white/50">Following</span>
-            </div>
-            <div className="inline-flex flex-col gap-1">
-              <span className="font-semibold leading-none text-white">
-                {userStats.stats[data.pubkey].zaps_received
-                  ? compactNumber.format(
-                      userStats.stats[data.pubkey].zaps_received.msats / 1000
-                    )
-                  : 0}
-              </span>
-              <span className="text-sm leading-none text-white/50">Zaps received</span>
-            </div>
-          </div>
-        )}
-      </div>
     </div>
   );
 }