From 199fe91801e43b1a2eb826a7975f0f8ffd14251b Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Thu, 14 May 2026 22:47:42 +0200
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20profile=20fields=20table=20?=
 =?UTF-8?q?=E2=80=94=20overflow-x-auto,=20break-all=20values,=20styled=20l?=
 =?UTF-8?q?inks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/remote-user-profile.tsx        | 53 +++++++++++--------
 1 file changed, 31 insertions(+), 22 deletions(-)

diff --git a/thoughts-frontend/components/remote-user-profile.tsx b/thoughts-frontend/components/remote-user-profile.tsx
index 6e3b548..a337b94 100644
--- a/thoughts-frontend/components/remote-user-profile.tsx
+++ b/thoughts-frontend/components/remote-user-profile.tsx
@@ -43,7 +43,7 @@ export function RemoteUserProfile({
       }
     } catch {
       toast.error(
-        followed ? "Failed to unfollow." : "Failed to send follow request."
+        followed ? "Failed to unfollow." : "Failed to send follow request.",
       );
     } finally {
       setLoading(false);
@@ -62,9 +62,7 @@ export function RemoteUserProfile({
       <div
         className="h-48 bg-muted bg-cover bg-center"
         style={{
-          backgroundImage: actor.bannerUrl
-            ? `url(${actor.bannerUrl})`
-            : "none",
+          backgroundImage: actor.bannerUrl ? `url(${actor.bannerUrl})` : "none",
         }}
       />
 
@@ -104,7 +102,9 @@ export function RemoteUserProfile({
                 <h1 className="text-2xl font-bold truncate">
                   {actor.displayName ?? actor.handle}
                 </h1>
-                <p className="text-sm text-muted-foreground truncate">{actor.handle}</p>
+                <p className="text-sm text-muted-foreground truncate">
+                  {actor.handle}
+                </p>
               </div>
 
               {actor.bio && (
@@ -117,9 +117,16 @@ export function RemoteUserProfile({
                 size="sm"
                 className="mt-4 w-full"
               >
-                <Link href={actor.url} target="_blank" rel="noopener noreferrer" className="flex items-center overflow-hidden">
+                <Link
+                  href={actor.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center overflow-hidden"
+                >
                   <ExternalLink className="mr-2 h-4 w-4 shrink-0" />
-                  <span className="truncate">{new URL(actor.url).hostname}</span>
+                  <span className="truncate">
+                    {new URL(actor.url).hostname}
+                  </span>
                 </Link>
               </Button>
 
@@ -138,21 +145,23 @@ export function RemoteUserProfile({
               )}
 
               {actor.attachment.length > 0 && (
-                <table className="mt-4 w-full text-sm border-collapse">
-                  <tbody>
-                    {actor.attachment.map((field) => (
-                      <tr key={field.name} className="border-t">
-                        <td className="py-1 pr-2 font-medium text-muted-foreground">
-                          {field.name}
-                        </td>
-                        <td
-                          className="py-1"
-                          dangerouslySetInnerHTML={{ __html: field.value }}
-                        />
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
+                <div className="mt-4 overflow-x-auto">
+                  <table className="w-full text-sm border-collapse">
+                    <tbody>
+                      {actor.attachment.map((field) => (
+                        <tr key={field.name} className="border-t">
+                          <td className="py-1 pr-3 font-medium text-muted-foreground whitespace-nowrap align-top">
+                            {field.name}
+                          </td>
+                          <td
+                            className="py-1 break-all [&_a]:underline [&_a]:text-primary"
+                            dangerouslySetInnerHTML={{ __html: field.value }}
+                          />
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
               )}
             </Card>
           </div>