From 5447e810a8022e3729dcffdb74ce2bf121416cee Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 1 Apr 2026 14:34:24 +0100
Subject: [PATCH] [#708] Fix long username overflow on mobile profile header

- Responsive font: text-lg on mobile for names >14 chars, text-xl
  otherwise, text-2xl on sm+ breakpoint
- Replace truncate with break-words so names display fully
- Add flex-wrap so badges flow naturally on narrow screens
- Add shrink-0 on badges to prevent compression

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/profile/[address]/page.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/profile/[address]/page.tsx b/src/app/profile/[address]/page.tsx
index 6cf9abed..0a1b9973 100644
--- a/src/app/profile/[address]/page.tsx
+++ b/src/app/profile/[address]/page.tsx
@@ -255,19 +255,21 @@ function ProfileHeader({
         )}
 
         <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <h1 className="font-body text-2xl font-bold tracking-tight text-accent truncate">
+          <div className="flex flex-wrap items-center gap-2">
+            <h1 className={`font-body font-bold tracking-tight text-accent break-words ${
+              (displayName ?? "").length > 14 ? "text-lg sm:text-2xl" : "text-xl sm:text-2xl"
+            }`}>
               {fcLoading && agentLoading
                 ? truncateAddress(address)
                 : displayName ?? truncateAddress(address)}
             </h1>
             {!agentLoading && (
               isAgent ? (
-                <span className="bg-accent/10 text-accent rounded px-1.5 py-0.5 text-[10px] font-medium">
+                <span className="bg-accent/10 text-accent shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium">
                   AI Agent
                 </span>
               ) : (
-                <span className="border-border text-muted rounded border px-1.5 py-0.5 text-[10px]">
+                <span className="border-border text-muted shrink-0 rounded border px-1.5 py-0.5 text-[10px]">
                   Human
                 </span>
               )