From 9b7758da996e2d92e8fc40da998f23edea082005 Mon Sep 17 00:00:00 2001
From: gosangam <sangam4742@gmail.com>
Date: Sat, 8 Aug 2026 00:12:34 +0530
Subject: [PATCH] fix: profile bio

---
 components/profile/profile-header.tsx | 141 ++++++++++++++------------
 1 file changed, 77 insertions(+), 64 deletions(-)

diff --git a/components/profile/profile-header.tsx b/components/profile/profile-header.tsx
index d55d8568..8c0f99a6 100644
--- a/components/profile/profile-header.tsx
+++ b/components/profile/profile-header.tsx
@@ -1,9 +1,14 @@
 "use client";
 
 /**
- * ProfileHeader — Instagram-style centered header used at the top of
- * /u/me and /u/[handle]. Avatar, display name, @handle, a single stat
- * line, and an action row.
+ * ProfileHeader — the header at the top of /u/me and /u/[handle].
+ *
+ * Layout is two stacked blocks:
+ *   1. An identity ROW — avatar on the left, with display name, @handle, and
+ *      the posts/followers/following stat line stacked to its right.
+ *   2. Full-width rows beneath it — the bio, then the action row. Both span the
+ *      avatar's width too, so a 200-character bio gets the whole column rather
+ *      than the narrow gutter beside the avatar.
  *
  * The action row hosts:
  *   • "Edit profile" link — only on the owner's own profile (via the
@@ -122,61 +127,80 @@ export function ProfileHeader({
 
   return (
     <>
-      <header className="flex flex-col items-center text-center gap-4 pt-4 pb-6 sm:pt-6 sm:pb-8">
-        {/* Avatar, with Śrīla Prabhupāda's portrait tucked into the lower-right
-            for his direct disciples (verification-tick placement). */}
-        <div className="relative">
-          <UserAvatar
-            src={avatarURL}
-            name={name}
-            className="size-24 sm:size-28"
-            textClassName="text-3xl"
-            interactive
-            onClick={avatarURL ? () => setZoomOpen(true) : undefined}
-            ariaLabel={`View ${name}'s profile picture`}
-          />
-          {isDirectDisciple ? (
-            <DiscipleBadge className="absolute -bottom-0.5 -right-0.5" />
-          ) : null}
-        </div>
-        <div className="space-y-2">
-          <div className="space-y-1">
-            <h1 className="font-(family-name:--font-title) font-semibold text-xl sm:text-2xl text-foreground leading-tight">
-              {name}
-            </h1>
-            <p className="text-sm text-muted-foreground">@{handle}</p>
+      <header className="flex flex-col gap-4 pt-4 pb-6 sm:pt-6 sm:pb-8">
+        {/* Identity row — avatar on the left, name + handle + stats stacked to
+            its right. The bio and action row sit below at full width, so long
+            prose gets the whole column instead of a narrow gutter. */}
+        <div className="flex items-center gap-4 sm:gap-6">
+          {/* Avatar, with Śrīla Prabhupāda's portrait tucked into the
+              lower-right for his direct disciples (verification-tick
+              placement). */}
+          <div className="relative shrink-0">
+            <UserAvatar
+              src={avatarURL}
+              name={name}
+              className="size-20 sm:size-28"
+              textClassName="text-3xl"
+              interactive
+              onClick={avatarURL ? () => setZoomOpen(true) : undefined}
+              ariaLabel={`View ${name}'s profile picture`}
+            />
+            {isDirectDisciple ? (
+              <DiscipleBadge className="absolute -bottom-0.5 -right-0.5" />
+            ) : null}
           </div>
 
-          {/* Stat line: posts · followers · following */}
-          <div className="flex items-center justify-center gap-5 sm:gap-7 pt-1 my-4">
-            {typeof postCount === "number" ? (
-              <Stat n={postCount} label={postCount === 1 ? "post" : "posts"} />
-            ) : null}
-            {showCounts ? (
-              <>
-                <Stat
-                  n={followers}
-                  label="followers"
-                  onClick={
-                    interactiveCounts
-                      ? () => setFollowList("followers")
-                      : undefined
-                  }
-                />
-                <Stat
-                  n={following}
-                  label="following"
-                  onClick={
-                    interactiveCounts
-                      ? () => setFollowList("following")
-                      : undefined
-                  }
-                />
-              </>
-            ) : null}
+          {/* min-w-0 lets the long-name truncation actually kick in — without
+              it the flex child refuses to shrink below its content width. */}
+          <div className="min-w-0 flex-1">
+            <h1 className="font-(family-name:--font-title) font-semibold text-xl sm:text-2xl text-foreground leading-tight truncate">
+              {name}
+            </h1>
+            <p className="mt-0.5 text-sm text-muted-foreground truncate">
+              @{handle}
+            </p>
+
+            {/* Stat line: posts · followers · following */}
+            <div className="mt-3 flex items-center gap-5 sm:gap-7">
+              {typeof postCount === "number" ? (
+                <Stat n={postCount} label={postCount === 1 ? "post" : "posts"} />
+              ) : null}
+              {showCounts ? (
+                <>
+                  <Stat
+                    n={followers}
+                    label="followers"
+                    onClick={
+                      interactiveCounts
+                        ? () => setFollowList("followers")
+                        : undefined
+                    }
+                  />
+                  <Stat
+                    n={following}
+                    label="following"
+                    onClick={
+                      interactiveCounts
+                        ? () => setFollowList("following")
+                        : undefined
+                    }
+                  />
+                </>
+              ) : null}
+            </div>
           </div>
         </div>
 
+        {/* Bio — spans the full column beneath the avatar AND the name/stats
+            block, so a 200-character bio wraps across the whole width instead
+            of being squeezed into the column beside the avatar. */}
+        {bio?.trim() ? (
+          <MentionText
+            text={bio.trim()}
+            className="text-sm sm:text-[15px] leading-relaxed text-foreground"
+          />
+        ) : null}
+
         {showOwnerControls ? (
           <div className="flex items-center gap-2">
             <Link
@@ -209,17 +233,6 @@ export function ProfileHeader({
             onResult={handleResult}
           />
         ) : null}
-
-        {/* Bio — left-aligned across the full column, unlike the centred
-            identity block above it. Prose reads badly centred once it wraps
-            past one line, and `self-stretch` overrides the header's
-            `items-center` so it spans edge to edge. */}
-        {bio?.trim() ? (
-          <MentionText
-            text={bio.trim()}
-            className="self-stretch text-left text-sm sm:text-[15px] leading-relaxed text-foreground"
-          />
-        ) : null}
       </header>
       {avatarURL ? (
         <AvatarZoomModal