fix: make social cards clickable and remove z-index trickery

[pauliecodes]

Description

This PR addresses the usability issue where clicking on text within social cards did not trigger navigation.

Previously, the text elements were positioned above the link overlay (using z-index) to allow for text selection, but this created "dead zones" where clicks were not registered.

Changes

• Removed CSS Tricks: Deleted the absolute inset-0 link overlay and z-1 classes, simplifying the DOM structure as suggested by @knowler.
• Added Click Handler: Implemented a handleCardClick function that programmatically clicks the CTA link when the card is clicked.
• Preserved Native Behavior: The handler checks for:
  • Nested links/icons (using .closest('a'))
  • Text selection (using window.getSelection())
  • Modifier keys (Ctrl/Cmd/Shift/Alt)

Demo

Before	After

Fixes #1517

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 18, 2026 2:59pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 18, 2026 2:59pm
npmx-lunaria	Ignored		Feb 18, 2026 2:59pm

[codecov]

Codecov Report

❌ Patch coverage is 20.00000% with 8 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/CallToAction.vue	20.00%	5 Missing and 3 partials ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request updates the CallToAction component to make the entire card surface trigger navigation. It adds a new handleCardClick(event: MouseEvent) that ignores clicks on inner anchors, modifier-key clicks, and clicks while text is selected, otherwise programmatically clicks the first anchor inside the card. The card containers receive @click="handleCardClick" and cursor-pointer. Z-index values were removed from heading and description text and an empty absolute span inside the CTA anchor was removed.

Possibly related PRs

• PR 799 — Restructured CallToAction by replacing an outer link with a card div containing an inner CTA anchor and overlay span; this change is directly related as the current PR forwards card clicks to that inner anchor and removes the redundant overlay span.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly explains the usability issue being fixed, the changes made, and includes before/after demo images.
Linked Issues check	✅ Passed	The PR fully addresses issue #1517 by removing z-index dead zones and implementing a handleCardClick function to make cards clickable whilst preserving native link behaviour.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the clickable card issue: removed CSS overlay, added click handler, and simplified DOM structure as intended.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[knowler]

LGTM! I have an optional suggestion. I’ll defer to others with regard to reviewing the Vue-ness of the code (revueing? 😅).

If all is well, we’ll hold off on merging until vacation is over.

[coderabbitai]

🧹 Nitpick comments (1)

app/components/CallToAction.vue (1)

29-38: Consider guarding against non-primary-button clicks.

There is no event.button !== 0 check. When a user middle-clicks the card body (outside the <a> element), handleCardClick fires and calls link.click(), which dispatches a synthetic left-click (button 0). Because the anchor has target="_blank", this opens the link in a new foreground tab, whereas a native middle-click on the anchor itself would open it in a background tab — the standard browser default. Adding the guard avoids this subtle discrepancy:

♻️ Proposed fix

 function handleCardClick(event: MouseEvent) {
+  if (event.button !== 0) return
   if ((event.target as HTMLElement).closest(':any-link')) return
   if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return