Fix: Make leaderboard responsive on mobile with horizontal scroll. Cl…

[SudharsanSaravanan]

Description

This PR fixes the mobile responsiveness issues in the PublicLeaderboard component by making the leaderboard horizontally scrollable on smaller screens. This prevents column compression and text overlap, ensuring a better UX on mobile devices while maintaining the existing layout on larger screens.

Screen.Recording.2026-01-11.004137.mp4

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Code refactoring
• Performance improvement
• UI/UX improvement
• Content update
• Chore/maintenance

Related Issue

Closes #45

Changes Made

Please list the specific changes made in this PR:

• Wrapped the leaderboard grid (header and entries) in an overflow-x-auto container to enable horizontal scrolling on mobile.
• Added min-w-[600px] to the inner grid container to preserve column widths and prevent compression.
• Ensured the footer remains outside the scrollable area for consistent visibility.

Testing Done

Please describe how you tested your changes:

• Tested in development mode (npm run dev)
• Tested production build (npm run build && npm start)
• Tested on multiple browsers (Chrome, Firefox, Safari)
• Tested on mobile devices/responsive design (iPhone 12 simulator, Android Chrome dev tools for 320px–768px viewports)
• Ran linting (npm run lint)
• Checked for console errors

Checklist

IMPORTANT: Please ensure all items are checked before submitting. PRs that don't follow these guidelines may be closed.

• I have read and followed all guidelines in CONTRIBUTING.md
• I have used the correct branch naming convention (feature/, fix/, docs/, etc.)
• My commits follow Conventional Commits format (feat:, fix:, docs:, etc.)
• I have performed a self-review and tested my changes thoroughly
• CRITICAL: I confirm ONLY my intended changes are included (no unrelated changes, debug code, or breaking changes)
• I have updated relevant documentation if needed
• I have tested the production build locally
• My changes are responsive and work on mobile devices

[vercel]

@SudharsanSaravanan is attempting to deploy a commit to the Akash Kumar's projects Team on Vercel.

A member of the Team first needs to authorize it.

[SudharsanSaravanan]

@akash-kumar-dev , Please merge this after reviewing under label "SWoC26"

[vercel]

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

Project	Deployment	Review	Updated (UTC)
web	Ready	Preview, Comment	Jan 11, 2026 1:04pm

[SudharsanSaravanan]

@karsh0, please merge it after reviewing

[akash-kumar-dev]

Looks good, thanks for your contribution @SudharsanSaravanan ! Please join our Discord: https://discord.com/invite/Gtv9PFgaHZ