From b3c2ea5ba5e5753c5b4c847402aa4556260fb7f6 Mon Sep 17 00:00:00 2001
From: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
 <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@buzz.block.builderlab.xyz>
Date: Thu, 30 Jul 2026 15:16:16 -0700
Subject: [PATCH] feat(desktop): restore compact link preview cards

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

diff --git a/desktop/src/shared/ui/link-preview-attachment.tsx b/desktop/src/shared/ui/link-preview-attachment.tsx
index 2fd843999..5a85dd943 100644
--- a/desktop/src/shared/ui/link-preview-attachment.tsx
+++ b/desktop/src/shared/ui/link-preview-attachment.tsx
@@ -1,11 +1,103 @@
-import { ChevronDown, ChevronUp, X } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { Globe, X } from "lucide-react";
 
 import type { ResolvedLinkPreview } from "@/shared/lib/useResolvedLinkPreviews";
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
+import {
+  Attachment,
+  AttachmentContent,
+  AttachmentMedia,
+  AttachmentTitle,
+  AttachmentTrigger,
+} from "@/shared/ui/attachment";
 
-function LinkPreviewIdentity({ preview }: { preview: ResolvedLinkPreview }) {
+function LinearLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      fill="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path d="M2.886 4.18A11.982 11.982 0 0 1 11.99 0C18.624 0 24 5.376 24 12.009c0 3.64-1.62 6.903-4.18 9.105L2.887 4.18ZM1.817 5.626l16.556 16.556c-.524.33-1.075.62-1.65.866L.951 7.277c.247-.575.537-1.126.866-1.65ZM.322 9.163l14.515 14.515c-.71.172-1.443.282-2.195.322L0 11.358a12 12 0 0 1 .322-2.195Zm-.17 4.862 9.823 9.824a12.02 12.02 0 0 1-9.824-9.824Z" />
+    </svg>
+  );
+}
+
+function GitHubLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      fill="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+    </svg>
+  );
+}
+
+function GoogleDriveLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      fill="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path d="M12.01 1.485c-2.082 0-3.754.02-3.743.047.01.02 1.708 3.001 3.774 6.62l3.76 6.574h3.76c2.081 0 3.753-.02 3.742-.047-.005-.02-1.708-3.001-3.775-6.62l-3.76-6.574zm-4.76 1.73a789.828 789.861 0 0 0-3.63 6.319L0 15.868l1.89 3.298 1.885 3.297 3.62-6.335 3.618-6.33-1.88-3.287C8.1 4.704 7.255 3.22 7.25 3.214zm2.259 12.653-.203.348c-.114.198-.96 1.672-1.88 3.287a423.93 423.948 0 0 1-1.698 2.97c-.01.026 3.24.042 7.222.042h7.244l1.796-3.157c.992-1.734 1.85-3.23 1.906-3.323l.104-.167h-7.249z" />
+    </svg>
+  );
+}
+
+function GoogleDocsLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      fill="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path d="M14.727 6.727H14V0H4.91c-.905 0-1.637.732-1.637 1.636v20.728c0 .904.732 1.636 1.636 1.636h14.182c.904 0 1.636-.732 1.636-1.636V6.727h-6zm-.545 10.455H7.09v-1.364h7.09v1.364zm2.727-3.273H7.091v-1.364h9.818v1.364zm0-3.273H7.091V9.273h9.818v1.363zM14.727 6h6l-6-6v6z" />
+    </svg>
+  );
+}
+
+function GoogleSheetsLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      fill="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path d="M11.318 12.545H7.91v-1.909h3.41v1.91zM14.728 0v6h6l-6-6zm1.363 10.636h-3.41v1.91h3.41v-1.91zm0 3.273h-3.41v1.91h3.41v-1.91zM20.727 6.5v15.864c0 .904-.732 1.636-1.636 1.636H4.909a1.636 1.636 0 0 1-1.636-1.636V1.636C3.273.732 4.005 0 4.909 0h9.318v6.5h6.5zm-3.273 2.773H6.545v7.909h10.91v-7.91zm-6.136 4.636H7.91v1.91h3.41v-1.91z" />
+    </svg>
+  );
+}
+
+function GoogleSlidesLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      fill="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path d="M16.09 15.273H7.91v-4.637h8.18v4.637zm1.728-8.523h2.91v15.614c0 .904-.733 1.636-1.637 1.636H4.909a1.636 1.636 0 0 1-1.636-1.636V1.636C3.273.732 4.005 0 4.909 0h9.068v6.75h3.841zm-.363 2.523H6.545v7.363h10.91V9.273zm-2.728-5.979V6h6.001l-6-6v3.294z" />
+    </svg>
+  );
+}
+
+function getHostname(preview: ResolvedLinkPreview): string {
+  try {
+    return new URL(preview.href).hostname.replace(/^www\./, "");
+  } catch {
+    return preview.provider;
+  }
+}
+
+function LinkPreviewLogo({ preview }: { preview: ResolvedLinkPreview }) {
   if (preview.faviconDataUrl) {
     return (
       <img
@@ -17,175 +109,28 @@ function LinkPreviewIdentity({ preview }: { preview: ResolvedLinkPreview }) {
       />
     );
   }
-  return null;
-}
 
-function getHostname(preview: ResolvedLinkPreview): string {
-  try {
-    return new URL(preview.href).hostname.replace(/^www\./, "");
-  } catch {
-    return preview.provider;
+  switch (preview.kind) {
+    case "github-issue":
+    case "github-pull-request":
+    case "github-repository":
+      return <GitHubLogo className="h-4 w-4" />;
+    case "linear-issue":
+      return <LinearLogo className="h-4 w-4" />;
+    case "google-drive-file":
+    case "google-drive-folder":
+      return <GoogleDriveLogo className="h-4 w-4" />;
+    case "google-docs-document":
+      return <GoogleDocsLogo className="h-4 w-4" />;
+    case "google-sheets-spreadsheet":
+      return <GoogleSheetsLogo className="h-4 w-4" />;
+    case "google-slides-presentation":
+      return <GoogleSlidesLogo className="h-4 w-4" />;
+    case "generic-link":
+      return <Globe aria-hidden="true" className="h-4 w-4" />;
   }
 }
 
-function isTweetPreview(preview: ResolvedLinkPreview): boolean {
-  try {
-    const url = new URL(preview.href);
-    return (
-      (url.hostname === "x.com" || url.hostname === "twitter.com") &&
-      /^\/[^/]+\/status\/\d+/.test(url.pathname)
-    );
-  } catch {
-    return false;
-  }
-}
-
-function TweetPreview({
-  className,
-  onRemove,
-  preview,
-}: {
-  className?: string;
-  onRemove?: () => void;
-  preview: ResolvedLinkPreview;
-}) {
-  const [descriptionExpanded, setDescriptionExpanded] = useState(false);
-  const [descriptionOverflows, setDescriptionOverflows] = useState(false);
-  const [imageExpanded, setImageExpanded] = useState(true);
-  const descriptionRef = useRef<HTMLDivElement>(null);
-  const reserveImage = preview.imageState !== "none";
-  const showImage = preview.imageState === "image";
-  const hostname = getHostname(preview);
-
-  useEffect(() => {
-    if (!preview.description) return;
-
-    const description = descriptionRef.current;
-    if (!description || descriptionExpanded) return;
-
-    const measure = () => {
-      setDescriptionOverflows(
-        description.scrollHeight > description.clientHeight + 1,
-      );
-    };
-    const frame = requestAnimationFrame(measure);
-    const observer = new ResizeObserver(measure);
-    observer.observe(description);
-    return () => {
-      cancelAnimationFrame(frame);
-      observer.disconnect();
-    };
-  }, [descriptionExpanded, preview.description]);
-
-  return (
-    <div
-      className={cn(
-        "relative w-[26rem] max-w-full shrink-0 border-l-[3px] border-border pl-3",
-        className,
-      )}
-      data-image-state={preview.imageState}
-      data-link-preview={preview.kind}
-      data-tweet-preview=""
-    >
-      <div
-        className="text-xs leading-4 text-muted-foreground"
-        data-link-preview-hostname=""
-      >
-        {hostname}
-      </div>
-      <a
-        className="mt-0.5 block truncate text-sm font-semibold leading-5 text-foreground hover:underline"
-        href={preview.href}
-        rel="noreferrer"
-        target="_blank"
-      >
-        {preview.title}
-      </a>
-      {preview.description ? (
-        <>
-          <div
-            className={cn(
-              "mt-1 whitespace-normal text-sm leading-5 text-foreground",
-              !descriptionExpanded && "line-clamp-5",
-            )}
-            data-slot="attachment-description"
-            ref={descriptionRef}
-          >
-            {preview.description}
-          </div>
-          {descriptionOverflows ? (
-            <button
-              aria-expanded={descriptionExpanded}
-              className="mt-1 text-xs font-medium leading-4 text-muted-foreground hover:text-foreground"
-              onClick={() => setDescriptionExpanded((expanded) => !expanded)}
-              type="button"
-            >
-              {descriptionExpanded ? "Show less" : "Show more"}
-            </button>
-          ) : null}
-        </>
-      ) : null}
-      {reserveImage ? (
-        <div className="mt-2">
-          {imageExpanded ? (
-            <a
-              aria-label={`Open tweet: ${preview.title}`}
-              className="block overflow-hidden rounded-xl bg-muted"
-              href={preview.href}
-              rel="noreferrer"
-              target="_blank"
-            >
-              <div
-                className="aspect-video w-full"
-                data-link-preview-thumbnail=""
-              >
-                {showImage ? (
-                  <img
-                    alt={`Preview from ${preview.imageDomain}`}
-                    className="h-full w-full object-cover"
-                    src={preview.imageDataUrl ?? undefined}
-                  />
-                ) : (
-                  <div
-                    className="h-full w-full animate-pulse bg-muted-foreground/10"
-                    data-link-preview-skeleton=""
-                  />
-                )}
-              </div>
-            </a>
-          ) : null}
-          <button
-            aria-expanded={imageExpanded}
-            className="mt-1 flex items-center gap-1 text-xs leading-4 text-muted-foreground hover:text-foreground"
-            onClick={() => setImageExpanded((expanded) => !expanded)}
-            type="button"
-          >
-            {imageExpanded ? (
-              <ChevronUp aria-hidden="true" className="size-3" />
-            ) : (
-              <ChevronDown aria-hidden="true" className="size-3" />
-            )}
-            {imageExpanded ? "Hide image" : "Show image"}
-          </button>
-        </div>
-      ) : null}
-      {onRemove ? (
-        <Button
-          aria-label="Remove previews for everyone"
-          className="absolute left-full top-0 z-20 ml-1 h-5 w-5 rounded-full text-muted-foreground opacity-0 transition-opacity hover:text-destructive focus-visible:opacity-100 group-hover/message:opacity-100"
-          onClick={onRemove}
-          size="icon-xs"
-          title="Remove previews for everyone"
-          type="button"
-          variant="ghost"
-        >
-          <X aria-hidden="true" />
-        </Button>
-      ) : null}
-    </div>
-  );
-}
-
 export function LinkPreviewAttachment({
   className,
   onRemove,
@@ -195,106 +140,64 @@ export function LinkPreviewAttachment({
   onRemove?: () => void;
   preview: ResolvedLinkPreview;
 }) {
-  const [imageExpanded, setImageExpanded] = useState(true);
-
-  if (isTweetPreview(preview)) {
-    return (
-      <TweetPreview
-        className={className}
-        onRemove={onRemove}
-        preview={preview}
-      />
-    );
-  }
-
   const reserveImage = preview.imageState !== "none";
   const showImage = preview.imageState === "image";
-  const hostname = getHostname(preview);
 
   return (
-    <div
-      className={cn(
-        "relative w-[26rem] max-w-full shrink-0 border-l-[3px] border-border pl-3",
-        className,
-      )}
-      data-image-state={preview.imageState}
-      data-link-preview={preview.kind}
-      data-link-preview-inline=""
-    >
-      <div className={cn(reserveImage && "min-h-[3.875rem]")}>
-        <div
-          className="flex items-center gap-1.5 text-xs leading-4 text-muted-foreground"
-          data-link-preview-identity=""
-        >
-          <LinkPreviewIdentity preview={preview} />
-          <span data-link-preview-hostname="">{hostname}</span>
-        </div>
-        <a
-          aria-label={`Open ${preview.provider} ${preview.typeLabel}: ${preview.title}`}
-          className="mt-0.5 block text-sm font-semibold leading-5 text-foreground hover:underline"
-          href={preview.href}
-          rel="noreferrer"
-          target="_blank"
-        >
-          <span
-            className={preview.description ? "line-clamp-1" : "line-clamp-2"}
+    <div className={cn("relative w-80 max-w-full shrink-0", className)}>
+      <Attachment
+        className="w-full no-underline shadow-none"
+        data-image-state={preview.imageState}
+        data-link-preview={preview.kind}
+        orientation="horizontal"
+      >
+        {reserveImage ? (
+          <AttachmentMedia
+            aria-hidden={showImage ? undefined : "true"}
+            className="h-12 w-16 rounded-lg bg-muted sm:h-14 sm:w-[6.6875rem]"
+            data-link-preview-thumbnail=""
+            variant="image"
           >
-            {preview.title}
-          </span>
-        </a>
-        {preview.description ? (
-          <div
-            className="mt-1 line-clamp-2 whitespace-normal text-sm leading-5 text-muted-foreground"
-            data-slot="attachment-description"
-          >
-            {preview.description}
-          </div>
-        ) : null}
-      </div>
-      {reserveImage ? (
-        <div className="mt-2">
-          {imageExpanded ? (
-            <a
-              aria-label={`Open preview image from ${hostname}`}
-              className="block overflow-hidden rounded-xl bg-muted"
-              href={preview.href}
-              rel="noreferrer"
-              target="_blank"
-            >
-              <div
-                className="aspect-[1.91/1] w-full"
-                data-link-preview-thumbnail=""
-              >
-                {showImage ? (
-                  <img
-                    alt={`Preview from ${preview.imageDomain}`}
-                    className="h-full w-full object-cover"
-                    src={preview.imageDataUrl ?? undefined}
-                  />
-                ) : (
-                  <div
-                    className="h-full w-full animate-pulse bg-muted-foreground/10"
-                    data-link-preview-skeleton=""
-                  />
-                )}
-              </div>
-            </a>
-          ) : null}
-          <button
-            aria-expanded={imageExpanded}
-            className="mt-1 flex items-center gap-1 text-xs leading-4 text-muted-foreground hover:text-foreground"
-            onClick={() => setImageExpanded((expanded) => !expanded)}
-            type="button"
-          >
-            {imageExpanded ? (
-              <ChevronUp aria-hidden="true" className="size-3" />
+            {showImage ? (
+              <img
+                alt={`Preview from ${preview.imageDomain}`}
+                className="h-full w-full object-cover"
+                src={preview.imageDataUrl ?? undefined}
+              />
             ) : (
-              <ChevronDown aria-hidden="true" className="size-3" />
+              <div
+                className="h-full w-full animate-pulse bg-muted-foreground/10"
+                data-link-preview-skeleton=""
+              />
             )}
-            {imageExpanded ? "Hide image" : "Show image"}
-          </button>
-        </div>
-      ) : null}
+          </AttachmentMedia>
+        ) : (
+          <AttachmentMedia className="link-preview-media">
+            <LinkPreviewLogo preview={preview} />
+          </AttachmentMedia>
+        )}
+        <AttachmentContent>
+          <div
+            className="truncate text-xs font-medium leading-4 text-muted-foreground"
+            data-link-preview-hostname=""
+          >
+            {getHostname(preview)}
+          </div>
+          <AttachmentTitle>{preview.title}</AttachmentTitle>
+        </AttachmentContent>
+        <AttachmentTrigger asChild>
+          <a
+            aria-label={`Open ${preview.provider} ${preview.typeLabel}: ${preview.title}`}
+            href={preview.href}
+            rel="noreferrer"
+            target="_blank"
+          >
+            <span className="sr-only">
+              Open {preview.provider} {preview.typeLabel}: {preview.title}
+            </span>
+          </a>
+        </AttachmentTrigger>
+      </Attachment>
       {onRemove ? (
         <Button
           aria-label="Remove previews for everyone"
diff --git a/desktop/tests/e2e/messaging.spec.ts b/desktop/tests/e2e/messaging.spec.ts
index d7a47d156..2197bded5 100644
--- a/desktop/tests/e2e/messaging.spec.ts
+++ b/desktop/tests/e2e/messaging.spec.ts
@@ -300,176 +300,104 @@ test("markdown tables overflow wide content and fill the message when narrow", a
     .toBeLessThanOrEqual(1);
 });
 
-test("cardless short tweet preview omits show more", async ({ page }) => {
-  const previewUrl = "https://x.com/jack/status/20";
-  await page.setViewportSize({ width: 800, height: 700 });
-  await page.goto("/");
-  await page.getByTestId("channel-general").click();
-  await page.getByTestId("message-input").fill(previewUrl);
-  await page.getByTestId("send-message").click();
-
-  const preview = page
-    .getByTestId("message-row")
-    .last()
-    .locator("[data-tweet-preview]");
-  await expect(preview).toContainText("just setting up my twttr");
-  await expect(preview.getByRole("button", { name: "Show more" })).toHaveCount(
-    0,
-  );
-});
-
-test("cardless tweet preview clamps text and collapses its image", async ({
+test("link preview image geometry stays stable while loading", async ({
   page,
 }) => {
-  const previewUrl = "https://x.com/buzz/status/1234567890";
-  await page.setViewportSize({ width: 800, height: 900 });
-  await page.goto("/");
-  await page.getByTestId("channel-general").click();
-  await page.getByTestId("message-input").fill(previewUrl);
-  await page.getByTestId("send-message").click();
+  const previewUrl = "https://github.com/block/buzz/pull/3246";
 
-  const preview = page
-    .getByTestId("message-row")
-    .last()
-    .locator("[data-tweet-preview]");
-  await expect(preview).toBeVisible();
-  await expect(preview).toHaveCSS("border-left-width", "3px");
-  await expect(preview.locator("[data-link-preview-hostname]")).toHaveText(
-    "x.com",
-  );
+  for (const width of [800, 420]) {
+    await page.setViewportSize({ width: 800, height: 700 });
+    await page.goto("/");
+    await page.getByTestId("channel-general").click();
+    await page.setViewportSize({ width, height: 700 });
+    await page.getByTestId("message-input").fill(previewUrl);
+    await page.getByTestId("send-message").click();
 
-  const description = preview.locator('[data-slot="attachment-description"]');
-  await expect(description).toHaveClass(/line-clamp-5/);
-  expect(
-    await description.evaluate((element) => element.clientHeight),
-  ).toBeLessThanOrEqual(100);
-  const collapsedHeight = await description.evaluate(
-    (element) => element.clientHeight,
-  );
-  await preview.getByRole("button", { name: "Show more" }).click();
-  await expect(description).not.toHaveClass(/line-clamp-5/);
-  await expect
-    .poll(() => description.evaluate((element) => element.clientHeight))
-    .toBeGreaterThan(collapsedHeight);
-  await preview.getByRole("button", { name: "Show less" }).click();
-  await expect(description).toHaveClass(/line-clamp-5/);
+    const card = page
+      .getByTestId("message-row")
+      .last()
+      .locator('[data-link-preview="github-pull-request"]');
+    await expect(card).toHaveAttribute("data-image-state", "pending");
+    await expect(card).toBeVisible();
+    await expect(card.locator("[data-link-preview-thumbnail]")).toBeVisible();
+    if (process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR) {
+      await card.screenshot({
+        animations: "disabled",
+        path: `${process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR}/${width}-pending.png`,
+      });
+    }
+    const pending = await card.evaluate((element) => ({
+      height: element.getBoundingClientRect().height,
+      textLeft: element
+        .querySelector('[data-slot="attachment-content"]')
+        ?.getBoundingClientRect().left,
+      thumbnailWidth: element
+        .querySelector("[data-link-preview-thumbnail]")
+        ?.getBoundingClientRect().width,
+    }));
 
-  const thumbnail = preview.locator("[data-link-preview-thumbnail]");
-  await expect(thumbnail).toBeVisible();
-  await preview.getByRole("button", { name: "Hide image" }).click();
-  await expect(thumbnail).toHaveCount(0);
-  await preview.getByRole("button", { name: "Show image" }).click();
-  await expect(thumbnail).toBeVisible();
+    await expect(card).toHaveAttribute("data-image-state", "image");
+    if (process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR) {
+      await waitForAnimations(page);
+      await card.screenshot({
+        path: `${process.env.BUZZ_LINK_PREVIEW_SCREENSHOTS_DIR}/${width}-loaded.png`,
+      });
+    }
+    const loaded = await card.evaluate((element) => ({
+      height: element.getBoundingClientRect().height,
+      textLeft: element
+        .querySelector('[data-slot="attachment-content"]')
+        ?.getBoundingClientRect().left,
+      thumbnailWidth: element
+        .querySelector("[data-link-preview-thumbnail]")
+        ?.getBoundingClientRect().width,
+    }));
+
+    expect(loaded.height).toBe(pending.height);
+    expect(loaded.textLeft).toBe(pending.textLeft);
+    expect(loaded.thumbnailWidth).toBe(pending.thumbnailWidth);
+    expect(loaded.thumbnailWidth).toBe(width < 640 ? 64 : 107);
+  }
 });
 
-test("link preview image geometry stays stable in the inline variant while loading", async ({
-  page,
-}) => {
-  const previewUrl = "https://github.com/block/buzz/pull/3246?inline=1";
-  await page.setViewportSize({ width: 800, height: 700 });
-  await page.goto("/");
-  await page.getByTestId("channel-general").click();
-  await page.getByTestId("message-input").fill(previewUrl);
-  await page.getByTestId("send-message").click();
-
-  const preview = page
-    .getByTestId("message-row")
-    .last()
-    .locator('[data-link-preview="github-pull-request"]');
-  await expect(preview).toHaveAttribute("data-link-preview-inline", "");
-  await expect(preview).toHaveAttribute("data-image-state", "pending");
-  await expect(preview).toHaveCSS("border-left-width", "3px");
-  await expect(preview.locator("[data-link-preview-favicon]")).toBeVisible();
-  const pendingImage = await preview
-    .locator("[data-link-preview-thumbnail]")
-    .boundingBox();
-
-  await expect(preview).toHaveAttribute("data-image-state", "image");
-  const loadedImage = await preview
-    .locator("[data-link-preview-thumbnail]")
-    .boundingBox();
-  expect(loadedImage).toEqual(pendingImage);
-  expect(loadedImage?.width).toBe(390);
-  expect(loadedImage?.height).toBeCloseTo(204, 0);
-  await expect(preview.locator("[data-link-preview-hostname]")).toHaveText(
-    "github.com",
-  );
-  await preview.getByRole("button", { name: "Hide image" }).click();
-  await expect(preview.locator("[data-link-preview-thumbnail]")).toHaveCount(0);
-  await preview.getByRole("button", { name: "Show image" }).click();
-  await expect(preview.locator("[data-link-preview-thumbnail]")).toBeVisible();
-});
-
-test("multiple unfurled link previews stack vertically", async ({ page }) => {
-  const previewUrls = [
-    "https://github.com/block/buzz/pull/3246?stack=1",
-    "https://github.com/block/buzz/pull/3246?stack=2",
-    "https://github.com/block/buzz/pull/3246?stack=3",
-  ];
-  await page.setViewportSize({ width: 1218, height: 1000 });
-  await page.goto("/");
-  await page.getByTestId("channel-general").click();
-  await page.getByTestId("message-input").fill(previewUrls.join(" "));
-  await page.getByTestId("send-message").click();
-
-  const row = page.getByTestId("message-row").last();
-  const list = row.locator("[data-link-preview-list]");
-  const previews = list.locator("[data-link-preview-inline]");
-  await expect(previews).toHaveCount(3);
-  await expect(list).toHaveCSS("flex-direction", "column");
-
-  const boxes = await previews.evaluateAll((elements) =>
-    elements.map((element) => {
-      const rect = element.getBoundingClientRect();
-      return { left: rect.left, top: rect.top };
-    }),
-  );
-  expect(boxes[1]?.left).toBeCloseTo(boxes[0]?.left ?? 0, 0);
-  expect(boxes[2]?.left).toBeCloseTo(boxes[0]?.left ?? 0, 0);
-  expect(boxes[1]?.top).toBeGreaterThan(boxes[0]?.top ?? 0);
-  expect(boxes[2]?.top).toBeGreaterThan(boxes[1]?.top ?? 0);
-  await expect(
-    row.getByRole("button", { name: "Remove previews for everyone" }),
-  ).toHaveCount(1);
-  const removeButton = row.getByRole("button", {
-    name: "Remove previews for everyone",
-  });
-  expect((await removeButton.boundingBox())?.y).toBeLessThan(
-    (await previews.nth(1).boundingBox())?.y ?? 0,
-  );
-});
-
-test("link preview no-image collapse restores the inline text stack", async ({
+test("link preview no-image collapse restores the compact card", async ({
   page,
 }) => {
   const previewUrl = "https://github.com/block/buzz/pull/3246?inline=none";
-  await page.setViewportSize({ width: 800, height: 700 });
-  await page.goto("/");
-  await page.getByTestId("channel-general").click();
-  await page.getByTestId("message-input").fill(previewUrl);
-  await page.getByTestId("send-message").click();
 
-  const preview = page
-    .getByTestId("message-row")
-    .last()
-    .locator('[data-link-preview="github-pull-request"]');
-  await expect(preview).toHaveAttribute("data-image-state", "pending");
-  await expect(preview.locator("[data-link-preview-thumbnail]")).toBeVisible();
-  const pendingHeight = await preview.evaluate(
-    (element) => element.getBoundingClientRect().height,
-  );
-  await expect(preview).toHaveAttribute("data-image-state", "none");
-  await expect(preview.locator("[data-link-preview-thumbnail]")).toHaveCount(0);
-  await expect(preview.locator("[data-link-preview-hostname]")).toHaveText(
-    "github.com",
-  );
-  await expect(preview.locator("[data-link-preview-favicon]")).toHaveCount(0);
-  await expect(preview.locator("[data-link-preview-identity] svg")).toHaveCount(
-    0,
-  );
-  expect(
-    await preview.evaluate((element) => element.getBoundingClientRect().height),
-  ).toBeLessThan(pendingHeight);
+  for (const width of [800, 420]) {
+    await page.setViewportSize({ width: 800, height: 700 });
+    await page.goto("/");
+    await page.getByTestId("channel-general").click();
+    await page.setViewportSize({ width, height: 700 });
+    await page.getByTestId("message-input").fill(previewUrl);
+    await page.getByTestId("send-message").click();
+
+    const card = page
+      .getByTestId("message-row")
+      .last()
+      .locator('[data-link-preview="github-pull-request"]');
+    await expect(card).toHaveAttribute("data-image-state", "pending");
+    const pending = await card.evaluate((element) => ({
+      height: element.getBoundingClientRect().height,
+      textLeft: element
+        .querySelector('[data-slot="attachment-content"]')
+        ?.getBoundingClientRect().left,
+    }));
+
+    await expect(card).toHaveAttribute("data-image-state", "none");
+    await expect(card.locator("[data-link-preview-thumbnail]")).toHaveCount(0);
+    await expect(card.locator(".link-preview-media")).toBeVisible();
+    const collapsed = await card.evaluate((element) => ({
+      height: element.getBoundingClientRect().height,
+      textLeft: element
+        .querySelector('[data-slot="attachment-content"]')
+        ?.getBoundingClientRect().left,
+    }));
+
+    expect(collapsed.height).toBeLessThan(pending.height);
+    expect(collapsed.textLeft).toBeLessThan(pending.textLeft ?? 0);
+  }
 });
 
 test("supported link previews keep the message link visible", async ({
@@ -490,9 +418,8 @@ test("supported link previews keep the message link visible", async ({
   ).toBeVisible();
   const previewCard = row.locator('[data-link-preview="github-pull-request"]');
   await expect(previewCard).toBeVisible();
-  await expect(previewCard).toHaveAttribute("data-link-preview-inline", "");
-  await expect(previewCard).toHaveCSS("border-left-width", "3px");
-  await expect(previewCard).toHaveCSS("border-top-left-radius", "0px");
+  await expectCornerRadiusPx(previewCard, 16);
+  await expectSmoothCorners(previewCard);
 });
 
 test("send multiple messages in sequence", async ({ page }) => {