From f7dc1e870c1914c1ad04988e3bfd9e6ff6ad32bd Mon Sep 17 00:00:00 2001
From: npub1cr79sy35cdv9vqsnnmkrgl8d0wp27edk7mqsw2p5s52upsrv28pszw3kur
 <c0fc581234c3585602139eec347ced7b82af65b6f6c10728348515c0c06c51c3@buzz.block.builderlab.xyz>
Date: Thu, 30 Jul 2026 16:48:30 +0200
Subject: [PATCH] feat(desktop): compact rich link preview cards

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>
---
 .../src/shared/ui/rich-link-preview-card.tsx  | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/desktop/src/shared/ui/rich-link-preview-card.tsx b/desktop/src/shared/ui/rich-link-preview-card.tsx
index 688e7e2e38..1e930febb0 100644
--- a/desktop/src/shared/ui/rich-link-preview-card.tsx
+++ b/desktop/src/shared/ui/rich-link-preview-card.tsx
@@ -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"