[Bug]: Leaderboard header overflows on mobile screens

[gauri9368gupta-maker]

Summary

On smaller screen sizes, the Leaderboard header (LEARNHUB://CONTRIBUTORS/LEADERBOARD) overflows its container instead of wrapping or scaling to fit. This causes horizontal overflow and affects the mobile layout.

Expected result

The header text should remain within the container.
Long text should wrap, shrink, or otherwise adapt to the available screen width.
No horizontal overflow should occur.

Actual result

The header text extends beyond the container on mobile screens.
The layout appears broken due to the overflowing title.

Steps to reproduce

Open the Contributors Leaderboard page on a mobile device or use responsive mode in DevTools (e.g., 360–430px width).
Navigate to the top of the page.
Observe the header section.

Logs / screenshots

Notes

Possible Cause
The header may have:

A fixed width or white-space: nowrap.
Missing responsive font sizing.
Insufficient overflow handling for long text.

Suggested Fix

Allow the header text to wrap (white-space: normal or overflow-wrap: anywhere).
Use responsive font sizes (e.g., clamp()).
Ensure the container width is constrained to 100% on mobile devices.

Environment

Device: Mobile (Android)
Screen Width: ~393px (or similar)
Browser: Chrome

[gauri9368gupta-maker]

@udaycodespace assign it to me under ECSoC 26!

[udaycodespace]

Assigned! Thanks for picking this up.

Please note that there's an open PR (#34) that refactors the leaderboard assets. If it gets merged before yours, you'll need to resolve any merge conflicts by rebasing or merging main into your branch.

Once you've completed the fix, please share a screenshot of the final mobile UI in your PR so I can verify it before merging.

@udaycodespace assign it to me under ECSoC 26!

[udaycodespace]

Hi @gauri9368gupta-maker,

Just checking in I haven't seen any updates on this issue yet. Since it's already been 2 days, could you please share your progress?

You still have about 1 day to open a PR or provide an update. If there's no activity by then, I'll unassign the issue and make it available for new contributors.

Thanks!

[gauri9368gupta-maker]

Hi @udaycodespace I am working it will surely raise pr till night.
Thanks for consideration.

[udaycodespace]

Thanks for the update.

No problem. Please ensure the PR is opened by tonight. Before submitting, make sure you've rebased with the latest main branch.

Also, please include mobile screenshots of the fixed Leaderboard header in your PR for validation, so I can verify that the overflow issue has been resolved before reviewing and merging.

I'll review it once it's submitted.

[gauri9368gupta-maker]

@udaycodespace ya sure!

[udaycodespace]

@udaycodespace ya sure!

The PR still needs more work before it can be considered for merging. Please go through all the requested changes again and ensure every review comment has been fully addressed.

Also, make sure the contribution is more substantial (around 30+ lines of meaningful code) and completely resolves the issue. Once you've updated the PR and added the required validation screenshots, request another review.

[udaycodespace]

Unassigning this issue since the associated PR is being closed due to inactivity and the requested review changes were not addressed.

This issue is now available for other contributors to work on.