Fix: #1198 (Badges not looking good on mobile)

[yashksaini-coder]

This pull request adds extensive responsive design improvements to the leaderboard.css file, enhancing the layout and appearance of the LeaderBoard component across various screen sizes. The changes focus on adapting typography, spacing, and element sizing for mobile and tablet devices, ensuring a more user-friendly experience on smaller screens. Badge and podium card layouts are also optimized for better visual consistency and accessibility.

Responsive design enhancements:

• Added multiple media queries (@media (max-width: 1024px), @media (max-width: 768px), and @media (max-width: 480px)) to adjust font sizes, spacing, and flex directions for headers, titles, subtitles, and containers, improving readability and layout on mobile and tablet devices. [1] [2] [3]
• Updated podium card and badge layouts to use column flex direction, center alignment, and dynamic sizing, ensuring proper display and interaction on smaller screens. [1] [2] [3]

Badge and contributor cell improvements:

• Adjusted badge icon sizes and gaps for podium cards, top performer cards, and contributor rows, with specific styles for different breakpoints to maintain visual consistency. [1] [2] [3] [4] [5]
• Enhanced contributor cell layouts by adding flex wrapping, overflow handling, and improved alignment for badges and stats, making the leaderboard more accessible and visually balanced. [1] [2] [3] [4]

General style and spacing refinements:

• Tweaked gaps, padding, and margin values for various elements to ensure consistent spacing and alignment throughout the leaderboard, especially on mobile devices. [1] [2] [3]

These changes collectively improve the LeaderBoard's usability and appearance on all screen sizes.

@Adez017 @sanjay-kv Please have a review on this

[vercel]

@yashksaini-coder 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 as soon as possible. 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, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

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 use code recode50 to get free: Mentorship for free.

2. Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.

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

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[github-actions]

✅ Synchronized metadata from Issue #1198:

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

[Adez017]

@yashksaini-coder , great work :)

[Adez017]

@sanjay-kv ready for merge

[github-actions]

✅ Synchronized metadata from Issue #1198:

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

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
recode-website	Ready	Preview	Comment	Nov 19, 2025 9:48am