Skip to content

Fix upvote button: make it reliably clickable from resource cards#493

Merged
soyalejolopez merged 1 commit into
microsoft:masterfrom
soyalejolopez:alejanl-microsoft-fix-upvote-button
Jul 22, 2026
Merged

Fix upvote button: make it reliably clickable from resource cards#493
soyalejolopez merged 1 commit into
microsoft:masterfrom
soyalejolopez:alejanl-microsoft-fix-upvote-button

Conversation

@soyalejolopez

Copy link
Copy Markdown
Member

What

Fixes the resource-card upvote button so it actually upvotes instead of navigating to the detail page, and makes reactions/upvotes persist reliably.

Root cause

Card navigation used a full-card "stretched link" overlay (a.resource-link::after { inset: 0; z-index: 1 }) sitting under the upvote button (z-index: 2). The .card-animate fade-in applies a transform, which creates/destroys a stacking context depending on timing. During that window the overlay could intercept the click and navigate to the detail page, so the vote never registered — which looked like the upvote "reverted."

Fix

  • Removed the fragile stretched-link overlay CSS.
  • Replaced it with explicit, control-aware whole-card navigation in JS that ignores .vote-btn clicks and resolves the resource link from the clicked card.

Verification

Verified in a real browser (Playwright) across:

  • Comfortable + compact/list views
  • Mid-animation clicks (no accidental navigation)
  • Upvote persistence across page reloads (localStorage key ft-votes)
  • Whole-card body click still opens the detail page
  • Title link still opens the detail page

Single-file change: index.html.

The card used a full-card stretched-link overlay (a.resource-link::after, inset:0) sitting under the upvote button. The .card-animate transform creates a stacking context that can let the overlay intercept clicks, navigating to the detail page instead of registering the vote (which looked like the upvote reverted). Removed the overlay and handle whole-card navigation in JS, skipping .vote-btn clicks.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@soyalejolopez
soyalejolopez force-pushed the alejanl-microsoft-fix-upvote-button branch from 99ec49a to 7a89fba Compare July 22, 2026 15:30
@soyalejolopez
soyalejolopez merged commit f447c93 into microsoft:master Jul 22, 2026
2 checks passed
@soyalejolopez
soyalejolopez deleted the alejanl-microsoft-fix-upvote-button branch July 22, 2026 15:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant