From 9f39435fc3c301ab306cad9006fc2b9f6e3381a3 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Thu, 30 Jul 2026 22:52:25 -0700
Subject: [PATCH] feat(desktop): refine compact link preview cards

- Remove compact card borders and background surfaces while preserving transparent hover behavior.
- Round thumbnail images on every corner and expand cards to the 24rem image-upload width.
- Shorten the preview settings submenu label from Link display to Display.
- Update compact preview geometry coverage for the wider borderless layout and await screenshot animations.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/src/shared/ui/compact-link-preview-attachment.tsx | 6 +++---
 desktop/src/shared/ui/link-preview-controls.tsx           | 2 +-
 desktop/tests/e2e/messaging.spec.ts                       | 6 ++++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/desktop/src/shared/ui/compact-link-preview-attachment.tsx b/desktop/src/shared/ui/compact-link-preview-attachment.tsx
index 018ec7201..e03b9246a 100644
--- a/desktop/src/shared/ui/compact-link-preview-attachment.tsx
+++ b/desktop/src/shared/ui/compact-link-preview-attachment.tsx
@@ -148,10 +148,10 @@ export function CompactLinkPreviewAttachment({
   const hostname = getHostname(preview);
 
   return (
-    <div className={cn("relative w-[22.5rem] max-w-full shrink-0", className)}>
+    <div className={cn("relative w-96 max-w-full shrink-0", className)}>
       <Attachment
         className={cn(
-          "w-full no-underline shadow-none",
+          "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",
         )}
         data-image-state={preview.imageState}
@@ -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-none bg-muted sm:w-32 sm:min-w-32 sm:max-w-32"
+            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"
             data-link-preview-thumbnail=""
             variant="image"
           >
diff --git a/desktop/src/shared/ui/link-preview-controls.tsx b/desktop/src/shared/ui/link-preview-controls.tsx
index 40ab1d3e1..66ac98bb6 100644
--- a/desktop/src/shared/ui/link-preview-controls.tsx
+++ b/desktop/src/shared/ui/link-preview-controls.tsx
@@ -89,7 +89,7 @@ export function LinkPreviewControls({
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start" side="right">
           <DropdownMenuSub>
-            <DropdownMenuSubTrigger>Link display</DropdownMenuSubTrigger>
+            <DropdownMenuSubTrigger>Display</DropdownMenuSubTrigger>
             <DropdownMenuSubContent>
               <DropdownMenuRadioGroup
                 onValueChange={handleStyleChange}
diff --git a/desktop/tests/e2e/messaging.spec.ts b/desktop/tests/e2e/messaging.spec.ts
index 99e7c9e68..6fc902614 100644
--- a/desktop/tests/e2e/messaging.spec.ts
+++ b/desktop/tests/e2e/messaging.spec.ts
@@ -1,5 +1,6 @@
 import { expect, test, type Locator } from "@playwright/test";
 
+import { waitForAnimations } from "../helpers/animations";
 import { installMockBridge, TEST_IDENTITIES } from "../helpers/bridge";
 import { expectCornerRadiusPx, expectSmoothCorners } from "../helpers/css";
 import { openSettings } from "../helpers/settings";
@@ -369,6 +370,7 @@ test("link preview image geometry stays stable while loading", async ({
     await expect(card).toBeVisible();
     await expect(card.locator("[data-link-preview-thumbnail]")).toBeVisible();
     if (process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR) {
+      await waitForAnimations(page);
       await card.screenshot({
         animations: "disabled",
         path: `${process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR}/${width}-pending.png`,
@@ -425,10 +427,10 @@ test("link preview image geometry stays stable while loading", async ({
         ?.getBoundingClientRect().width,
     }));
 
-    expect(pending.width).toBe(width < 640 ? 325 : 360);
+    expect(pending.width).toBe(width < 640 ? 325 : 384);
     expect(pending.height).toBe(80);
     expect(pending.textInset).toBe(12);
-    expect(pending.thumbnailHeight).toBe(78);
+    expect(pending.thumbnailHeight).toBe(80);
     expect(loaded.height).toBe(pending.height);
     expect(loaded.textLeft).toBe(pending.textLeft);
     expect(loaded.thumbnailHeight).toBe(pending.thumbnailHeight);