mirror of
https://github.com/block/buzz.git
synced 2026-10-31 06:21:34 +00:00
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:
@@ -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}
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user