jerry/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-11-01 15:01:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(desktop): compact rich link preview cards

Browse Source 
Per feedback in the buzz-frontend thread: shrink the preview card by
moving the OG image from a full-width banner (max-h-44) to a 64px
thumbnail beside the text, Slack-compact style. Card height is now
bounded by the two-line description regardless of image aspect.

Co-authored-by: Thomas Petersen <thomasp@squareup.com>
Signed-off-by: Thomas Petersen <thomasp@squareup.com>
This commit is contained in:
npub1cr79sy35cdv9vqsnnmkrgl8d0wp27edk7mqsw2p5s52upsrv28pszw3kur
2026-07-30 16:48:30 +02:00
parent 03d6176876
commit f7dc1e870c
1 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
desktop/src/shared/ui/rich-link-preview-card.tsx
View File

@@ -43,7 +43,7 @@ function PreviewImage({ src }: { src: string }) {
return (
<img
alt=""
className="mt-2 max-h-44 w-full rounded-lg border border-border/50 object-cover"
className="h-16 w-16 shrink-0 rounded-lg border border-border/50 object-cover"
loading="lazy"
onError={() => setFailed(true)}
src={src}
@@ -97,19 +97,23 @@ export function RichLinkPreviewCard({
)}
data-rich-link-preview=""
>
<div className="flex items-center gap-1.5 text-xs font-medium leading-4 text-muted-foreground">
<Favicon metadata={metadata} />
<span className="truncate">{metadata.siteName ?? hostname}</span>
</div>
<div className="mt-1 truncate text-sm font-semibold leading-5 text-primary">
{metadata.title}
</div>
{metadata.description ? (
<div className="mt-0.5 line-clamp-2 text-xs leading-4 text-muted-foreground">
{metadata.description}
<div className="flex items-start gap-3">
<div className="min-w-0 flex-1">
<div className="flex items-center gap-1.5 text-xs font-medium leading-4 text-muted-foreground">
<Favicon metadata={metadata} />
<span className="truncate">{metadata.siteName ?? hostname}</span>
</div>
<div className="mt-1 truncate text-sm font-semibold leading-5 text-primary">
{metadata.title}
</div>
{metadata.description ? (
<div className="mt-0.5 line-clamp-2 text-xs leading-4 text-muted-foreground">
{metadata.description}
</div>
) : null}
</div>
) : null}
{metadata.imageUrl ? <PreviewImage src={metadata.imageUrl} /> : null}
{metadata.imageUrl ? <PreviewImage src={metadata.imageUrl} /> : null}
</div>
<a
aria-label={`Open link: ${metadata.title ?? hostname}`}
className="absolute inset-0 z-10"