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:
Taylor Ho
2026-07-30 23:14:06 -07:00
committed by npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
parent fb0eca68e5
commit a2ffdf8f80
3 changed files with 8 additions and 4 deletions

View File

@@ -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 ? (

View File

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

View File

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