fix(frontend): profile fields — grid layout caps name col at 5rem, value gets remaining space

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">
+                <div className="mt-4 space-y-0 text-sm">
-                  <table className="w-full text-sm border-collapse">
+                  {actor.attachment.map((field) => (
-                    <tbody>
+                    <div
-                      {actor.attachment.map((field) => (
+                      key={field.name}
-                        <tr key={field.name} className="border-t">
+                      className="grid grid-cols-[minmax(0,5rem)_1fr] gap-2 border-t py-1"
-                          <td className="py-1 pr-3 font-medium text-muted-foreground whitespace-nowrap align-top">
+                    >
-                            {field.name}
+                      <span className="font-medium text-muted-foreground truncate" title={field.name}>
-                          </td>
+                        {field.name}
-                          <td
+                      </span>
-                            className="py-1 break-all [&_a]:underline [&_a]:text-primary"
+                      <span
-                            dangerouslySetInnerHTML={{ __html: field.value }}
+                        className="break-all min-w-0 [&_a]:underline [&_a]:text-primary"
-                          />
+                        dangerouslySetInnerHTML={{ __html: field.value }}
-                        </tr>
+                      />
-                      ))}
+                    </div>
-                    </tbody>
+                  ))}
-                  </table>
                 </div>
               )}
             </Card>