fix(frontend): profile fields table — overflow-x-auto, break-all values, styled links
Some checks failed
lint / lint (push) Has been cancelled
test / unit (push) Has been cancelled
test / integration (push) Has been cancelled
lint / lint (pull_request) Failing after 9m12s
test / unit (pull_request) Failing after 11m0s
test / integration (pull_request) Failing after 17m17s

This commit is contained in:
2026-05-14 22:47:42 +02:00
parent f3df2061e1
commit 199fe91801

View File

@@ -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">
<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-2 font-medium text-muted-foreground">
<td className="py-1 pr-3 font-medium text-muted-foreground whitespace-nowrap align-top">
{field.name}
</td>
<td
className="py-1"
className="py-1 break-all [&_a]:underline [&_a]:text-primary"
dangerouslySetInnerHTML={{ __html: field.value }}
/>
</tr>
))}
</tbody>
</table>
</div>
)}
</Card>
</div>