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>
This commit is contained in:
Arjun Mahanti
2026-08-26 09:04:24 -04:00
parent e2f11b98f9
commit 8a8688e820
2 changed files with 19 additions and 7 deletions

View File

@@ -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}

View File

@@ -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();