From bab244e3d63a6f343f245323c1d161cd1f58150d Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Thu, 30 Jul 2026 22:56:15 -0700
Subject: [PATCH] feat(desktop): refine compact preview content hierarchy

- Expand compact preview thumbnails to an 88px height with slightly wider responsive dimensions.
- Reduce the thumbnail-to-content inset so preview text sits closer to its image.
- Allow compact titles to wrap across two lines for better readability.
- De-emphasize hostnames and descriptions with a softer secondary foreground color.
- Update desktop geometry coverage for the revised dimensions, spacing, and title treatment.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../ui/compact-link-preview-attachment.tsx    | 22 +++++++------------
 desktop/tests/e2e/messaging.spec.ts           | 10 ++++-----
 2 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/desktop/src/shared/ui/compact-link-preview-attachment.tsx b/desktop/src/shared/ui/compact-link-preview-attachment.tsx
index e03b9246a..90fbf448a 100644
--- a/desktop/src/shared/ui/compact-link-preview-attachment.tsx
+++ b/desktop/src/shared/ui/compact-link-preview-attachment.tsx
@@ -152,7 +152,7 @@ export function CompactLinkPreviewAttachment({
       <Attachment
         className={cn(
           "w-full border-0 bg-transparent no-underline shadow-none hover:border-transparent hover:bg-transparent",
-          reserveImage && "h-20 min-h-20 max-h-20 gap-0 p-0",
+          reserveImage && "h-22 min-h-22 max-h-22 gap-0 p-0",
         )}
         data-image-state={preview.imageState}
         data-link-preview={preview.kind}
@@ -161,7 +161,7 @@ export function CompactLinkPreviewAttachment({
         {reserveImage ? (
           <AttachmentMedia
             aria-hidden={showImage ? undefined : "true"}
-            className="aspect-auto h-full min-h-0 w-28 min-w-28 max-w-28 self-stretch rounded-xl bg-muted sm:w-32 sm:min-w-32 sm:max-w-32"
+            className="aspect-auto h-full min-h-0 w-30 min-w-30 max-w-30 self-stretch rounded-xl bg-muted sm:w-34 sm:min-w-34 sm:max-w-34"
             data-link-preview-thumbnail=""
             variant="image"
           >
@@ -183,9 +183,9 @@ export function CompactLinkPreviewAttachment({
             <LinkPreviewLogo preview={preview} />
           </AttachmentMedia>
         )}
-        <AttachmentContent className={reserveImage ? "px-3 py-2.5" : undefined}>
+        <AttachmentContent className={reserveImage ? "px-2 py-2" : undefined}>
           <div
-            className="flex min-w-0 items-center gap-1.5 text-xs font-normal leading-4 text-muted-foreground"
+            className="flex min-w-0 items-center gap-1.5 text-xs font-normal leading-4 text-muted-foreground/70"
             data-link-preview-hostname=""
           >
             {reserveImage && preview.faviconDataUrl ? (
@@ -201,19 +201,13 @@ export function CompactLinkPreviewAttachment({
               {reserveImage ? hostname : preview.provider}
             </span>
           </div>
-          <AttachmentTitle
-            className={
-              reserveImage
-                ? preview.description
-                  ? "truncate"
-                  : "line-clamp-2 whitespace-normal"
-                : undefined
-            }
-          >
+          <AttachmentTitle className="line-clamp-2 whitespace-normal">
             {preview.title}
           </AttachmentTitle>
           {reserveImage && preview.description ? (
-            <AttachmentDescription>{preview.description}</AttachmentDescription>
+            <AttachmentDescription className="text-muted-foreground/70">
+              {preview.description}
+            </AttachmentDescription>
           ) : null}
         </AttachmentContent>
         <AttachmentTrigger asChild>
diff --git a/desktop/tests/e2e/messaging.spec.ts b/desktop/tests/e2e/messaging.spec.ts
index 6fc902614..f2668efee 100644
--- a/desktop/tests/e2e/messaging.spec.ts
+++ b/desktop/tests/e2e/messaging.spec.ts
@@ -428,15 +428,15 @@ test("link preview image geometry stays stable while loading", async ({
     }));
 
     expect(pending.width).toBe(width < 640 ? 325 : 384);
-    expect(pending.height).toBe(80);
-    expect(pending.textInset).toBe(12);
-    expect(pending.thumbnailHeight).toBe(80);
+    expect(pending.height).toBe(88);
+    expect(pending.textInset).toBe(8);
+    expect(pending.thumbnailHeight).toBe(88);
     expect(loaded.height).toBe(pending.height);
     expect(loaded.textLeft).toBe(pending.textLeft);
     expect(loaded.thumbnailHeight).toBe(pending.thumbnailHeight);
     expect(loaded.thumbnailWidth).toBe(pending.thumbnailWidth);
-    expect(loaded.thumbnailWidth).toBe(width < 640 ? 112 : 128);
-    expect(loaded.titleClass).toContain("truncate");
+    expect(loaded.thumbnailWidth).toBe(width < 640 ? 120 : 136);
+    expect(loaded.titleClass).toContain("line-clamp-2");
     expect(loaded.description).toBe(
       "A polished, stable preview for shared links.",
     );