fix(post): make opening the source article an easy target by tsahimatsliah · Pull Request #6248 · dailydotdev/apps

tsahimatsliah · 2026-06-28T11:09:37Z

Changes

The readability redesign shrank the cover image to a thumbnail and gave its click to a full-screen lightbox. That removed the big, learned target users used to tap to open the original article — leaving only a small w-fit "Read" button. This restores an easy, obvious path to the source on both mobile and desktop.

All in PostFocusCard.tsx, which backs both the post modal and the /posts/[id] page:

Title links to the source — the <h1> is now a link sharing the read button's reader-install gate + readHref, only when there's an external article to open (native posts keep a plain title). Biggest, most forgiving target, matching the HN/Reddit convention.
Read button promoted — ButtonSize.Small → Medium, w-full tablet:w-fit (full-width tap target on mobile), and the existing open-link icon now trails so it reads as outbound. The in-app reader variant keeps its globe leading.
Extracted canReadArticle once and reused it for the title and button.

Events

No new tracking events — both routes reuse the existing read-article handler.

Experiment

No.

Manual Testing

Verified with strict typecheck (scripts/typecheck-strict-changed.js) and eslint on the changed file. Worth a reviewer glance in Storybook / preview, since the component renders inside an auth/data-gated post view:

MobileL (420px) — button goes full-width, title link
Tablet (656px) — button hugs content
Laptop (1020px)

Two optional follow-ups noted for discussion:

Title + button are both outbound links (mild SR redundancy) — can mark the title link aria-hidden/tabindex=-1 if we want the button as the sole AT stop.
Title kept text-primary + hover:underline (conservative); could tint text-text-link for a stronger link affordance.

Preview domain

https://claude-quizzical-booth-43f322.preview.app.daily.dev

The readability redesign shrank the cover image to a thumbnail and handed its click to a lightbox. That removed the big, learned target users relied on to open the original article, leaving only a small w-fit "Read" button. - Title now links to the source (shares the read button's reader gate) - Read button: Small -> Medium, full-width on mobile, open-link icon trails - Cover thumbnail gets a zoom badge so "tap to view image" reads clearly Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel · 2026-06-28T11:09:43Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
daily-webapp	Ready	Preview	Jul 1, 2026 3:28pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
storybook	Ignored		Jul 1, 2026 3:28pm

Keep the read-discoverability changes (title link + promoted button) but remove the thumbnail zoom badge. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

The source name already links via SourceStrip, but the author shown above the title (shared/freeform/welcome posts) rendered a dead anchor with no destination. Wrap UserShortInfo in a Link to author.permalink, mirroring the RepostListItem pattern. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Full-width on mobile stretched the button awkwardly relative to its label; match desktop and hug content at every breakpoint. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Wrap the title, cover image and metadata in a single overlay-link so tapping anywhere in the lead block opens the source. The top source/follow header is intentionally excluded, and the interactive children (cover image lightbox, read button, shared-via link) sit above the overlay via `relative z-1` so they keep their own behavior. The overlay is pointer-only (aria-hidden + tabIndex -1); the read button remains the labeled keyboard/AT path, so this adds the large click target without duplicating links for assistive tech. Replaces the standalone title link with the wider area. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Subtle surface-hover background behind the whole lead block so it reads as one clickable region. Applied to the wrapper (its background paints behind all content, keeping text crisp) with -m-2/p-2 for a rounded halo that doesn't shift layout, and gated on canReadArticle so native posts don't show a misleading hover. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Swap the surface-hover background for a title underline on hover, using a named group on the lead wrapper. Cleaner "this links" affordance that doesn't recolour the whole region; gated on canReadArticle. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

w-24 -> w-28 (mobile), w-40 -> w-48 (tablet). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Swap the hover underline for the link colour (text-text-link) with a smooth color transition, gated on canReadArticle. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

The underline was driven by group-hover on the whole trigger container, so it appeared when hovering the avatar/gaps where the cursor isn't over a link. Scope hover/focus-visible underline to the name anchor itself and drop the now-unused group class. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

- Title turns the link colour only when a link in the lead area is hovered (group-has-[a:hover]); the cover image is a <button> that opens the lightbox, so hovering it no longer colours the title. - Cover image stretches to the title + read button column height (items-stretch + h-full image) instead of a fixed aspect ratio. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Lift the domain link above the lead-area overlay (relative z-1) so it's directly hoverable, and add the link colour on hover alongside the existing underline so it reads as a proper hyperlink. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Remove the full lead-area overlay so the metadata strip (date, read time, "From") is no longer part of the click target — hovering it no longer shows a link cursor or colours the title. The title itself is the link (link colour on hover) alongside the read button; the source domain stays its own separate link. Drops the now-unneeded z-1/group machinery. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

A calm, left-aligned text link (no domain) placed right after the reading content and before the comments — a low, blended "exit to the article" where the reader's eye lands. Reuses the read href + reader gate. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Style the after-summary link like the "From {domain}" metadata (tertiary, typo-callout, not bold), always underlined with a trailing open-link icon, and deliberately not the blue link colour. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Use the article domain in the after-summary link copy; fall back to the standard read text for videos/posts without a domain. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Match the "From {domain}" metadata line: "Read the full article on" is plain tertiary typo-callout text (no underline, no icon), and only the domain is the blue, underlined link. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Drop the centred w-fit pill; the bar is now full width with all actions as direct children spread edge-to-edge (justify-between), so icons read as one evenly spaced, consistent set (all IconSize.Small / ButtonSize.Medium). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Restyle the action bar as separate rounded surface pills (like YouTube): - upvote (+ count) and downvote share one pill split by a divider - comment, award and copy link are their own surface pills - copy link shows its label inside; the rest are icon/count only - save keeps the bookmark-reminder dropdown, wrapped as a pill Drop the single translucent bar and the copy-link overflow fold (pills wrap). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Redesign share posts render the shared article (article = post.sharedPost), so the h1 showed the article's title and the user's own commentary (post.title) was dropped. Surface post.title above the shared article when it differs from the article's title. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Drop the oval rounded-full pills for the button radius (rounded-12) plus the standard button border (border-border-subtlest-tertiary) on surface-float, matching our button styling. Inner buttons round to rounded-10 so their hover sits inside the pill border. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

A short title squashed the cover because it stretched to the title-column height. Give the cover a fixed ratio instead: square below tablet, the wide open-graph cover ratio (25/13) from tablet up — so it never distorts. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

- Bookmark now shows a "Save" / "Saved" label (BookmarkButton respects a caller-provided iconPosition so the label sits beside the icon). - Vote pill: move the score between the up/down arrows (Reddit-style) and drop the divider; the count dims when not upvoted. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

- Left group: post-contribution actions (vote, comment, award). - Right group: utility actions (copy link, save, three-dots) — the menu now always shows, so the sticky-sentinel/pinned machinery is removed. - Fix the Save label so it matches the other pill labels (muted footnote) instead of the button's default bold/primary text. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

The deprecated BookmarkButton (QuaternaryButton) renders its label as a separate bold element that clipped inside the pill. Use a CardAction like Copy link so "Save" / "Saved" sizes and styles consistently. Revert the BookmarkButton iconPosition tweak (no longer used). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…bile - Remove the three-dots menu from the bar (the header already carries it). - Order the utility side Save then Copy link. - Collapse both to icon-only below tablet (label shows from tablet up). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

- Add vertical padding to the action pills (py-1). - Drive Save / Copy link label visibility off the tablet breakpoint via useViewSize, so below tablet they render as proper icon-only square buttons (fixes the leftover label space on the right) instead of a CSS-hidden label. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

The boost CTA lived in PostHeaderActions, which the focus card doesn't use, so it vanished from the post page/modal. Surface BoostPostButton in the header row (gated by useShowBoostButton), scoping the three-dots rotate to the menu so the boost icon isn't rotated. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Put the date · read time · source strip back inside the title column, under the title, so a short title pulls it up instead of leaving it below the (taller) cover image. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Revert the pill padding (py-1) and instead add vertical margin (my-2) to the action row, so there's more room above and below the buttons — as intended. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Combine the actions into two groups: the left (vote + comment + award) now shares a single bordered surface container, matching the right (save + copy) which is also one container. Individual pills are gone. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Give each group container the macOS/iOS floating-bar treatment — translucent blurred surface + soft shadow — keeping the rounded-12 button radius. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Match the production banner: one full-width glass bar (translucent, blurred, soft shadow) with icon actions split left (vote, comment, award) and right (bookmark, copy link, shield) via justify-between — instead of two separate group pills. Keeps the bottom float (no top stickiness). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – daily-webapp June 28, 2026 11:14 View deployment

tsahimatsliah and others added 3 commits June 28, 2026 14:17

fix(post): drop cover image zoom badge

c5eaa97

Keep the read-discoverability changes (title link + promoted button) but remove the thumbnail zoom badge. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

fix(post): keep read button content-width on mobile

2ca208f

Full-width on mobile stretched the button awkwardly relative to its label; match desktop and hug content at every breakpoint. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – daily-webapp June 28, 2026 11:25 View deployment

vercel Bot deployed to Preview – daily-webapp June 28, 2026 12:15 View deployment

vercel Bot deployed to Preview – daily-webapp June 28, 2026 12:24 View deployment

tsahimatsliah and others added 2 commits June 28, 2026 16:18

style(post): enlarge cover thumbnail ~20%

737bc2e

w-24 -> w-28 (mobile), w-40 -> w-48 (tablet). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – daily-webapp June 28, 2026 13:26 View deployment

tsahimatsliah and others added 2 commits June 28, 2026 16:57

style(post): rotate the three-dots menu icon 90deg

3a0ef9a

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

feat(post): turn title link-colour on lead-area hover

f92dcf0

Swap the hover underline for the link colour (text-text-link) with a smooth color transition, gated on canReadArticle. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – daily-webapp June 28, 2026 14:04 View deployment

vercel Bot deployed to Preview – daily-webapp June 28, 2026 14:22 View deployment

tsahimatsliah and others added 2 commits June 29, 2026 00:40

vercel Bot deployed to Preview – daily-webapp June 28, 2026 21:47 View deployment

vercel Bot deployed to Preview – daily-webapp June 29, 2026 05:27 View deployment

vercel Bot deployed to Preview – daily-webapp June 29, 2026 06:00 View deployment

vercel Bot deployed to Preview – daily-webapp June 29, 2026 06:20 View deployment

tsahimatsliah and others added 2 commits June 29, 2026 10:10

copy(post): source link reads "Read the full article on {domain}"

3f8af42

Use the article domain in the after-summary link copy; fall back to the standard read text for videos/posts without a domain. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – daily-webapp July 1, 2026 08:36 View deployment

tsahimatsliah and others added 2 commits July 1, 2026 12:07

vercel Bot deployed to Preview – daily-webapp July 1, 2026 09:35 View deployment

vercel Bot deployed to Preview – daily-webapp July 1, 2026 09:44 View deployment

vercel Bot deployed to Preview – daily-webapp July 1, 2026 10:31 View deployment

vercel Bot deployed to Preview – daily-webapp July 1, 2026 10:37 View deployment

vercel Bot deployed to Preview – daily-webapp July 1, 2026 10:48 View deployment

vercel Bot deployed to Preview – daily-webapp July 1, 2026 11:01 View deployment

tsahimatsliah and others added 2 commits July 1, 2026 14:30

vercel Bot deployed to Preview – daily-webapp July 1, 2026 11:38 View deployment

tsahimatsliah and others added 2 commits July 1, 2026 14:42

vercel Bot deployed to Preview – daily-webapp July 1, 2026 11:51 View deployment

feat(post): move date strip directly under the title

01993e1

Put the date · read time · source strip back inside the title column, under the title, so a short title pulls it up instead of leaving it below the (taller) cover image. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – daily-webapp July 1, 2026 12:04 View deployment

style(post): space above/below the action bar, not inside the pills

ea647bc

Revert the pill padding (py-1) and instead add vertical margin (my-2) to the action row, so there's more room above and below the buttons — as intended. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – daily-webapp July 1, 2026 13:03 View deployment

vercel Bot had a problem deploying to Preview – daily-webapp July 1, 2026 13:14 Failure

style(post): make the two action groups floating glass bars

5b9e3c5

Give each group container the macOS/iOS floating-bar treatment — translucent blurred surface + soft shadow — keeping the rounded-12 button radius. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – daily-webapp July 1, 2026 15:03 View deployment

vercel Bot deployed to Preview – daily-webapp July 1, 2026 15:28 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(post): make opening the source article an easy target#6248

fix(post): make opening the source article an easy target#6248
tsahimatsliah wants to merge 53 commits into
mainfrom
claude/quizzical-booth-43f322

tsahimatsliah commented Jun 28, 2026 •

edited by github-actions Bot

Loading

Uh oh!

vercel Bot commented Jun 28, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

tsahimatsliah commented Jun 28, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Events

Experiment

Manual Testing

Preview domain

Uh oh!

vercel Bot commented Jun 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

tsahimatsliah commented Jun 28, 2026 •

edited by github-actions Bot

Loading

vercel Bot commented Jun 28, 2026 •

edited

Loading