From 612b7f069b2554d68f87fcbd21cf4b004c79f5ca Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Thu, 14 May 2026 22:51:07 +0200
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20profile=20fields=20=E2=80=94?=
 =?UTF-8?q?=20grid=20layout=20caps=20name=20col=20at=205rem,=20value=20get?=
 =?UTF-8?q?s=20remaining=20space?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/thoughts-frontend/components/remote-user-profile.tsx b/thoughts-frontend/components/remote-user-profile.tsx
index a337b94..fcfc488 100644
--- a/thoughts-frontend/components/remote-user-profile.tsx
+++ b/thoughts-frontend/components/remote-user-profile.tsx
@@ -145,22 +145,21 @@ export function RemoteUserProfile({
               )}
 
               {actor.attachment.length > 0 && (
-                <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 className="mt-4 space-y-0 text-sm">
+                  {actor.attachment.map((field) => (
+                    <div
+                      key={field.name}
+                      className="grid grid-cols-[minmax(0,5rem)_1fr] gap-2 border-t py-1"
+                    >
+                      <span className="font-medium text-muted-foreground truncate" title={field.name}>
+                        {field.name}
+                      </span>
+                      <span
+                        className="break-all min-w-0 [&_a]:underline [&_a]:text-primary"
+                        dangerouslySetInnerHTML={{ __html: field.value }}
+                      />
+                    </div>
+                  ))}
                 </div>
               )}
             </Card>