Fix 'Go to Project' button link by separating IssueList from outer an…

[ubaidurrehman-developer]

🐛 Problem Description

On project cards that have loadIssues: true enabled (activist.org, CircuitVerse, and Opensourcedesign), hovering over or clicking the "Go to Project" button did not work as a link and did not display a pointer cursor (cursor: pointer).

🔍 Root Cause Analysis

In src/components/ProjectCard.astro, the entire project card was wrapped in a top-level anchor tag (<a class="Card-Real-Link">). When loadIssues: true is enabled, <IssueList /> renders individual GitHub issue links using <a> tags inside the card body.

According to HTML specifications, nesting <a> tags inside <a> tags is invalid HTML. Browser DOM parsers automatically auto-closed the parent <a class="Card-Real-Link"> before rendering the inner issue links. This ejected <div class="Card-Link"><span>Go to Project</span></div> outside of the anchor element in the DOM tree, causing it to lose its hyperlink functionality and pointer cursor styling.

🛠️ Changes Made

• Refactored src/components/ProjectCard.astro:
  • Wrapped header, tags, and description in <a class="Card-Real-Link" href={projectLink} target="_blank">.
  • Moved {loadIssues && <IssueList />} into <div class="Card-Issues-Wrapper">, rendering it outside of any parent <a> element.
  • Converted the "Go to Project" button into an explicit anchor tag: <a class="Card-Link" href={projectLink} target="_blank">.
  • Updated CSS styles to preserve original layout, hover transitions, and cursor: pointer behavior.

✅ Verification

• Verified DOM structure has no invalid nested <a> tags.
• Verified that "Go to Project" button displays cursor: pointer and opens project link when clicked on cards with loadIssues: true.
• Verified issue links inside <IssueList /> remain independently clickable.