fix(desktop): remove link preview image padding

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>

desktop/src/shared/ui/link-preview-attachment.tsx

@@ -126,7 +126,10 @@ export function LinkPreviewAttachment({
   return (
     <div className={cn("relative w-80 max-w-full shrink-0", className)}>
       <Attachment
-        className="w-full no-underline shadow-none"
+        className={cn(
+          "w-full no-underline shadow-none",
+          reserveImage && "gap-0 p-0",
+        )}
         data-image-state={preview.imageState}
         data-link-preview={preview.kind}
         orientation="horizontal"
@@ -134,7 +137,7 @@ export function LinkPreviewAttachment({
         {reserveImage ? (
           <AttachmentMedia
             aria-hidden={showImage ? undefined : "true"}
-            className="h-12 w-16 rounded-lg bg-muted sm:h-14 sm:w-[6.6875rem]"
+            className="h-auto w-16 self-stretch rounded-none bg-muted sm:w-[6.6875rem]"
             data-link-preview-thumbnail=""
             variant="image"
           >
@@ -156,7 +159,7 @@ export function LinkPreviewAttachment({
             <LinkPreviewLogo preview={preview} />
           </AttachmentMedia>
         )}
-        <AttachmentContent>
+        <AttachmentContent className={reserveImage ? "px-3 py-2.5" : undefined}>
           <div className="truncate text-xs font-medium leading-4 text-muted-foreground">
             {preview.provider}
           </div>

desktop/tests/e2e/messaging.spec.ts

@@ -302,15 +302,38 @@ test("link preview image geometry stays stable while loading", async ({
         path: `${process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR}/${width}-pending.png`,
       });
     }
-    const pending = await card.evaluate((element) => ({
-      height: element.getBoundingClientRect().height,
-      textLeft: element
+    const pending = await card.evaluate((element) => {
+      const cardRect = element.getBoundingClientRect();
+      const contentRect = element
         .querySelector('[data-slot="attachment-content"]')
-        ?.getBoundingClientRect().left,
-      thumbnailWidth: element
+        ?.getBoundingClientRect();
+      const thumbnailRect = element
         .querySelector("[data-link-preview-thumbnail]")
-        ?.getBoundingClientRect().width,
-    }));
+        ?.getBoundingClientRect();
+      return {
+        height: cardRect.height,
+        imageBottomInset: thumbnailRect
+          ? cardRect.bottom - thumbnailRect.bottom
+          : undefined,
+        imageLeftInset: thumbnailRect
+          ? thumbnailRect.left - cardRect.left
+          : undefined,
+        imageTopInset: thumbnailRect
+          ? thumbnailRect.top - cardRect.top
+          : undefined,
+        textInset: contentRect
+          ? Number.parseFloat(
+              getComputedStyle(
+                element.querySelector(
+                  '[data-slot="attachment-content"]',
+                ) as Element,
+              ).paddingLeft,
+            )
+          : undefined,
+        textLeft: contentRect?.left,
+        thumbnailWidth: thumbnailRect?.width,
+      };
+    });
 
     await expect(card).toHaveAttribute("data-image-state", "image");
     if (process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR) {
@@ -333,6 +356,10 @@ test("link preview image geometry stays stable while loading", async ({
     expect(loaded.textLeft).toBe(pending.textLeft);
     expect(loaded.thumbnailWidth).toBe(pending.thumbnailWidth);
     expect(loaded.thumbnailWidth).toBe(width < 640 ? 64 : 107);
+    expect(pending.imageBottomInset).toBeCloseTo(1, 1);
+    expect(pending.imageLeftInset).toBeCloseTo(1, 1);
+    expect(pending.imageTopInset).toBeCloseTo(1, 1);
+    expect(pending.textInset).toBe(12);
   }
 });