From 8a8688e820dbdaa2fc23cd5bc4b2a425b3237fac Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Wed, 26 Aug 2026 09:04:24 -0400
Subject: [PATCH] style(desktop): compact Bestie message preview

Co-authored-by: Arjun Mahanti <arjun@squareup.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
Co-authored-by: Codex <noreply@openai.com>
---
 .../messages/ui/BestieMessagePopover.tsx        |  9 ++++++---
 desktop/tests/e2e/bestie.spec.ts                | 17 +++++++++++++----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/desktop/src/features/messages/ui/BestieMessagePopover.tsx b/desktop/src/features/messages/ui/BestieMessagePopover.tsx
index e3df9344b7..7e26725a2b 100644
--- a/desktop/src/features/messages/ui/BestieMessagePopover.tsx
+++ b/desktop/src/features/messages/ui/BestieMessagePopover.tsx
@@ -125,7 +125,7 @@ export function BestieMessagePopover({
           </div>
 
           <div
-            className="mx-auto aspect-[4/3] w-4/5 overflow-hidden rounded-xl border border-border/60 bg-background p-2.5 shadow-sm"
+            className="w-3/4 overflow-hidden rounded-xl border border-border/60 bg-background p-2.5 shadow-sm"
             data-testid={`bestie-message-snapshot-${message.id}`}
           >
             <div className="flex min-w-0 items-start gap-2">
@@ -144,9 +144,12 @@ export function BestieMessagePopover({
                     {message.time}
                   </p>
                 </div>
-                <div className="mt-0.5 max-h-10.5 overflow-hidden">
+                <div
+                  className="mt-0.5 max-h-3.5 overflow-hidden"
+                  data-testid={`bestie-message-snapshot-body-${message.id}`}
+                >
                   <VideoReviewCommentMarkdown
-                    className="line-clamp-3 text-[10px] leading-3.5 text-foreground/80 [&_p]:leading-3.5"
+                    className="line-clamp-1 text-[10px] leading-3.5 text-foreground/80 [&_p]:leading-3.5"
                     content={message.body}
                     interactive={false}
                     messageId={message.id}
diff --git a/desktop/tests/e2e/bestie.spec.ts b/desktop/tests/e2e/bestie.spec.ts
index 98b0b55cd7..408df770aa 100644
--- a/desktop/tests/e2e/bestie.spec.ts
+++ b/desktop/tests/e2e/bestie.spec.ts
@@ -72,17 +72,26 @@ test("message action sends a message link and optional note to Bestie", async ({
   await expect(popover).not.toContainText("Share this message with Bestie");
   await expect(popover).toContainText("Please fold this launch decision");
   const snapshot = popover.getByTestId(`bestie-message-snapshot-${messageId}`);
+  const snapshotBody = popover.getByTestId(
+    `bestie-message-snapshot-body-${messageId}`,
+  );
   await expect(snapshot).toBeVisible();
-  const [popoverBox, snapshotBox] = await Promise.all([
+  const [popoverBox, snapshotBox, snapshotBodyBox] = await Promise.all([
     popover.boundingBox(),
     snapshot.boundingBox(),
+    snapshotBody.boundingBox(),
   ]);
   expect(popoverBox).not.toBeNull();
   expect(snapshotBox).not.toBeNull();
-  if (popoverBox && snapshotBox) {
+  expect(snapshotBodyBox).not.toBeNull();
+  if (popoverBox && snapshotBox && snapshotBodyBox) {
     expect(popoverBox.width).toBeLessThanOrEqual(328);
-    expect(snapshotBox.width / snapshotBox.height).toBeCloseTo(4 / 3, 1);
-    expect(snapshotBox.width / (popoverBox.width - 32)).toBeCloseTo(0.8, 1);
+    expect(snapshotBox.width / (popoverBox.width - 32)).toBeCloseTo(0.75, 1);
+    expect(Math.abs(snapshotBox.x - (popoverBox.x + 16))).toBeLessThanOrEqual(
+      1,
+    );
+    expect(snapshotBox.height).toBeLessThan(64);
+    expect(snapshotBodyBox.height).toBeLessThanOrEqual(14);
   }
   const composer = popover.getByTestId("message-composer");
   await expect(composer).toBeVisible();