GKaszewski/thoughts
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-05-14 22:47:42 +02:00
parent f3df2061e1
commit 199fe91801
1 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
thoughts-frontend/components/remote-user-profile.tsx
View File

@@ -43,7 +43,7 @@ export function RemoteUserProfile({
} }
} catch { } catch {
toast.error( toast.error(
followed ? "Failed to unfollow." : "Failed to send follow request." followed ? "Failed to unfollow." : "Failed to send follow request.",
); );
} finally { } finally {
setLoading(false); setLoading(false);
@@ -62,9 +62,7 @@ export function RemoteUserProfile({
<div <div
className="h-48 bg-muted bg-cover bg-center" className="h-48 bg-muted bg-cover bg-center"
style={{ style={{
backgroundImage: actor.bannerUrl backgroundImage: actor.bannerUrl ? `url(${actor.bannerUrl})` : "none",
? `url(${actor.bannerUrl})`
: "none",
}} }}
/> />
@@ -104,7 +102,9 @@ export function RemoteUserProfile({
<h1 className="text-2xl font-bold truncate"> <h1 className="text-2xl font-bold truncate">
{actor.displayName ?? actor.handle} {actor.displayName ?? actor.handle}
</h1> </h1>
<p className="text-sm text-muted-foreground truncate">{actor.handle}</p> <p className="text-sm text-muted-foreground truncate">
{actor.handle}
</p>
</div> </div>
{actor.bio && ( {actor.bio && (
@@ -117,9 +117,16 @@ export function RemoteUserProfile({
size="sm" size="sm"
className="mt-4 w-full" 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" /> <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> </Link>
</Button> </Button>
@@ -138,21 +145,23 @@ export function RemoteUserProfile({
)} )}
{actor.attachment.length > 0 && ( {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> <tbody>
{actor.attachment.map((field) => ( {actor.attachment.map((field) => (
<tr key={field.name} className="border-t"> <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} {field.name}
</td> </td>
<td <td
className="py-1" className="py-1 break-all [&_a]:underline [&_a]:text-primary"
dangerouslySetInnerHTML={{ __html: field.value }} dangerouslySetInnerHTML={{ __html: field.value }}
/> />
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>
</div>
)} )}
</Card> </Card>
</div> </div>