From e2f11b98f9b9f37ce15e2d3cee4b4d03adb3abd3 Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Wed, 26 Aug 2026 08:45:11 -0400
Subject: [PATCH] style(desktop): align Bestie handoff popover

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      | 20 +++++++++----------
 desktop/tests/e2e/bestie.spec.ts              | 16 ++++++++++++---
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/desktop/src/features/messages/ui/BestieMessagePopover.tsx b/desktop/src/features/messages/ui/BestieMessagePopover.tsx
index 7f95d4cacd..e3df9344b7 100644
--- a/desktop/src/features/messages/ui/BestieMessagePopover.tsx
+++ b/desktop/src/features/messages/ui/BestieMessagePopover.tsx
@@ -109,12 +109,12 @@ export function BestieMessagePopover({
       </Tooltip>
       <PopoverContent
         align="end"
-        className="w-[min(30rem,calc(100vw-2rem))] rounded-3xl p-0 shadow-xl"
+        className="w-[min(328px,calc(100vw-2rem))]"
         data-testid={`bestie-popover-${message.id}`}
         side="top"
         sideOffset={10}
       >
-        <div className="space-y-3.5 p-4">
+        <div className="space-y-3.5">
           <div className="flex items-center gap-2.5">
             <ProfileAvatar
               avatarUrl={bestie.avatarUrl}
@@ -125,28 +125,28 @@ export function BestieMessagePopover({
           </div>
 
           <div
-            className="rounded-2xl border border-border/60 bg-background px-3 py-3 shadow-md"
+            className="mx-auto aspect-[4/3] w-4/5 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.5">
+            <div className="flex min-w-0 items-start gap-2">
               <UserAvatar
                 avatarUrl={message.avatarUrl ?? null}
-                className="size-7 shrink-0"
+                className="size-6 shrink-0"
                 displayName={message.author}
                 size="sm"
               />
               <div className="min-w-0 flex-1">
-                <div className="flex min-w-0 items-baseline gap-1.5">
-                  <p className="truncate text-xs font-semibold leading-4">
+                <div className="flex min-w-0 items-baseline gap-1">
+                  <p className="truncate text-[10px] font-semibold leading-3.5">
                     {message.author}
                   </p>
-                  <p className="shrink-0 text-[10px] leading-4 text-muted-foreground/70">
+                  <p className="shrink-0 text-[9px] leading-3.5 text-muted-foreground/70">
                     {message.time}
                   </p>
                 </div>
-                <div className="mt-0.5 max-h-12 overflow-hidden">
+                <div className="mt-0.5 max-h-10.5 overflow-hidden">
                   <VideoReviewCommentMarkdown
-                    className="line-clamp-3 text-xs leading-4 text-foreground/80 [&_p]:leading-4"
+                    className="line-clamp-3 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 7edae0c516..98b0b55cd7 100644
--- a/desktop/tests/e2e/bestie.spec.ts
+++ b/desktop/tests/e2e/bestie.spec.ts
@@ -71,9 +71,19 @@ test("message action sends a message link and optional note to Bestie", async ({
   await expect(popover).toContainText("Bestie");
   await expect(popover).not.toContainText("Share this message with Bestie");
   await expect(popover).toContainText("Please fold this launch decision");
-  await expect(
-    popover.getByTestId(`bestie-message-snapshot-${messageId}`),
-  ).toBeVisible();
+  const snapshot = popover.getByTestId(`bestie-message-snapshot-${messageId}`);
+  await expect(snapshot).toBeVisible();
+  const [popoverBox, snapshotBox] = await Promise.all([
+    popover.boundingBox(),
+    snapshot.boundingBox(),
+  ]);
+  expect(popoverBox).not.toBeNull();
+  expect(snapshotBox).not.toBeNull();
+  if (popoverBox && snapshotBox) {
+    expect(popoverBox.width).toBeLessThanOrEqual(328);
+    expect(snapshotBox.width / snapshotBox.height).toBeCloseTo(4 / 3, 1);
+    expect(snapshotBox.width / (popoverBox.width - 32)).toBeCloseTo(0.8, 1);
+  }
   const composer = popover.getByTestId("message-composer");
   await expect(composer).toBeVisible();
   await expect(composer.getByRole("button", { name: "Send" })).toBeEnabled();