From f3df2061e1b15afd75cadb0990d46b9fe98c7726 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Thu, 14 May 2026 22:45:06 +0200
Subject: [PATCH] fix(frontend): truncate long handles in remote user profile
 and card

---
 thoughts-frontend/components/remote-user-card.tsx    | 6 +++---
 thoughts-frontend/components/remote-user-profile.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/thoughts-frontend/components/remote-user-card.tsx b/thoughts-frontend/components/remote-user-card.tsx
index a07f5e9..ec0b1de 100644
--- a/thoughts-frontend/components/remote-user-card.tsx
+++ b/thoughts-frontend/components/remote-user-card.tsx
@@ -42,9 +42,9 @@ export function RemoteUserCard({ actor }: RemoteUserCardProps) {
         className="flex items-center gap-3 hover:opacity-80"
       >
         <UserAvatar src={actor.avatarUrl} alt={actor.displayName ?? actor.handle} />
-        <div>
-          <p className="font-medium">{actor.displayName ?? actor.handle}</p>
-          <p className="text-sm text-muted-foreground">{actor.handle}</p>
+        <div className="min-w-0">
+          <p className="font-medium truncate">{actor.displayName ?? actor.handle}</p>
+          <p className="text-sm text-muted-foreground truncate">{actor.handle}</p>
         </div>
       </Link>
       <Button
diff --git a/thoughts-frontend/components/remote-user-profile.tsx b/thoughts-frontend/components/remote-user-profile.tsx
index b68a2c5..6e3b548 100644
--- a/thoughts-frontend/components/remote-user-profile.tsx
+++ b/thoughts-frontend/components/remote-user-profile.tsx
@@ -100,11 +100,11 @@ export function RemoteUserProfile({
                 )}
               </div>
 
-              <div className="mt-4">
-                <h1 className="text-2xl font-bold">
+              <div className="mt-4 min-w-0">
+                <h1 className="text-2xl font-bold truncate">
                   {actor.displayName ?? actor.handle}
                 </h1>
-                <p className="text-sm text-muted-foreground">{actor.handle}</p>
+                <p className="text-sm text-muted-foreground truncate">{actor.handle}</p>
               </div>
 
               {actor.bio && (