mirror of
https://github.com/block/buzz.git
synced 2026-11-01 15:01:12 +00:00
feat(desktop): unify compact preview hover treatment
- Underline compact preview hostnames and titles together whenever the card is hovered. - Remove independent hostname hover styling so the interaction consistently represents the full destination URL. - Restore stronger description colors for standard rich previews and tweet content while keeping hostnames secondary. - Add E2E coverage confirming both compact identity elements receive the shared hover affordance. Co-authored-by: Taylor Ho <taylorkmho@gmail.com> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
This commit is contained in:
committed by
npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
parent
fb0eca68e5
commit
a2ffdf8f80
@@ -69,7 +69,7 @@ export function CompactLinkPreviewAttachment({
|
||||
) : null}
|
||||
<AttachmentContent className={reserveImage ? "px-2 py-2" : undefined}>
|
||||
<a
|
||||
className="relative z-20 flex w-fit max-w-full min-w-0 items-center gap-1.5 text-xs font-normal leading-4 text-muted-foreground/70 hover:underline"
|
||||
className="relative z-20 flex w-fit max-w-full min-w-0 items-center gap-1.5 text-xs font-normal leading-4 text-muted-foreground/70 group-hover/attachment:underline"
|
||||
data-link-preview-hostname=""
|
||||
href={preview.href}
|
||||
rel="noreferrer"
|
||||
@@ -86,7 +86,7 @@ export function CompactLinkPreviewAttachment({
|
||||
) : null}
|
||||
<span className="truncate">{hostname}</span>
|
||||
</a>
|
||||
<AttachmentTitle className="line-clamp-2 whitespace-normal">
|
||||
<AttachmentTitle className="line-clamp-2 whitespace-normal group-hover/attachment:underline">
|
||||
{preview.title}
|
||||
</AttachmentTitle>
|
||||
{preview.description ? (
|
||||
|
||||
@@ -171,7 +171,7 @@ function TweetPreview({
|
||||
</a>
|
||||
{contentExpanded && preview.description ? (
|
||||
<LinkPreviewDescription
|
||||
className="text-muted-foreground/70"
|
||||
className="text-foreground"
|
||||
description={preview.description}
|
||||
/>
|
||||
) : null}
|
||||
@@ -271,7 +271,7 @@ export function RichLinkPreviewAttachment({
|
||||
</a>
|
||||
{contentExpanded && preview.description ? (
|
||||
<LinkPreviewDescription
|
||||
className="text-muted-foreground/70"
|
||||
className="text-muted-foreground"
|
||||
description={preview.description}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
@@ -500,6 +500,10 @@ test("link preview no-image layout keeps compact height", async ({ page }) => {
|
||||
card.locator('[data-slot="attachment-description"]'),
|
||||
).toHaveText("Open-source collaboration for the Buzz app.");
|
||||
await expect(card).toHaveCSS("border-left-width", "3px");
|
||||
const title = card.locator('[data-slot="attachment-title"]');
|
||||
await card.hover();
|
||||
await expect(hostnameLink).toHaveCSS("text-decoration-line", "underline");
|
||||
await expect(title).toHaveCSS("text-decoration-line", "underline");
|
||||
const resolved = await card.evaluate((element) => ({
|
||||
height: element.getBoundingClientRect().height,
|
||||
textLeft: element
|
||||
|
||||
Reference in New Issue
Block a user