tweaks on hover of leaderboard badges

[steam-bell-92]

Description

Tried fixing hover ui/ux issue of leaderboard badges
Fixes #2071

Type of Change

• New feature (e.g., new page, component, or functionality)
• Bug fix (non-breaking change that fixes an issue)
• UI/UX improvement (design, layout, or styling updates)
• Performance optimization (e.g., code splitting, caching)
• Documentation update (README, contribution guidelines, etc.)
• Other (please specify):

Checklist

• My code follows the style guidelines of this project.
• I have tested my changes across major browsers and devices
• My changes do not generate new console warnings or errors .
• I ran npm run build and attached screenshot(s) in this PR.
• This is already assigned Issue to me, not an unassigned issue.

Was not able to test changes locally as Clerk is not configured locally, causing the leaderboard page to crash

[vercel]

@steam-bell-92 is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it asap. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, if it's a Video -LEGEND, which helps speed up the review. If you have questions, reach out to LinkedIn. You can see in our Leaderboard in 20 min from now!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Your perks for contribution to this community 👇🏻

1. Get free Consultation after 5 PR: Mentorship for free.

2. Get the Ebook for free after 10 PR: You can tag me in Discussion to get the same. Data Science cheatsheet for Beginners.

3. Check out this weekly Newsletter: Sanjay's Newsletter.

Thanks again for your contribution! 😊

[github-actions]

✅ Synchronized metadata from Issue #2071:

• Labels: level 1, recode
• Milestone: recode:launch 3.0

[Copilot]

Copilot review overview

🟡 Changes recommended

The new tooltip styling relies on clip-path without a robust cross-browser fallback and includes a CSS selector that is overly broad for the new structured tooltip content.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 1 · 1

Open (2)

• Add clip-path fallback for cross-browser tooltip support · New
• Scope tooltip image styling to direct child images · New

What changed in this PR

Updates the LeaderBoard “Your badges” hover tooltip UI to better match the badge visuals by making the tooltip hexagonal and enriching its content.

Changes:

• Restructures the badge tooltip markup to include the badge image alongside the badge name.
• Updates CSS to remove circular cropping on badge icons and applies a hexagonal clip-path to the tooltip.
• Adjusts tooltip layout to a flex row with spacing/padding to accommodate the new content.

File	Description
src/​components/​dashboard/​LeaderBoard/​leaderboard.tsx	Updates tooltip markup to include the badge image + label text.
src/​components/​dashboard/​LeaderBoard/​leaderboard.css	Removes circular icon cropping and makes the tooltip hex-shaped with updated layout styles.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.