Skip to content

fix: prevent leaderboard header overflow on mobile - #38

Closed
gauri9368gupta-maker wants to merge 1 commit into
udaycodespace:mainfrom
gauri9368gupta-maker:fix/mobile-leaderboard-header-overflow
Closed

fix: prevent leaderboard header overflow on mobile#38
gauri9368gupta-maker wants to merge 1 commit into
udaycodespace:mainfrom
gauri9368gupta-maker:fix/mobile-leaderboard-header-overflow

Conversation

@gauri9368gupta-maker

@gauri9368gupta-maker gauri9368gupta-maker commented Jul 26, 2026

Copy link
Copy Markdown

Description

Fixed the mobile overflow issue in the leaderboard header.

Fixes #35

Changes Made

  • Added responsive text wrapping for .terminal-title
  • Prevented long header text from overflowing on smaller screens
  • Improved mobile layout compatibility

Testing

  • Tested on local responsive view (360px–430px widths)
  • Verified that the leaderboard header stays within the container

Screenshots

Attached screenshots for reference.

Screenshot 2026-07-26 194703 Screenshot 2026-07-26 203250

Note: The GitHub live page and localhost page may appear slightly different due to deployment/cache differences. The issue was reproduced and fixed locally, and the PR contains the responsive overflow fix.

@udaycodespace
udaycodespace self-requested a review July 26, 2026 16:39
@udaycodespace udaycodespace added ECSoC26 Required label for a PR to be eligible for Sentinel scoring ECSoC26-L1 Easy difficulty, auto-assigned by Sentinel — 5 points redo Reviewed — needs changes before it can be merged labels Jul 26, 2026
@udaycodespace

Copy link
Copy Markdown
Owner

@gauri9368gupta-maker Thanks for the PR, man.

The fix works, but it's very minimal. I was expecting a more complete responsive solution for this issue.

Please improve it by:

  • Using responsive font sizing (e.g. clamp()).
  • Testing and fixing the layout for multiple mobile screen sizes (320px, 360px, 393px, 430px).
  • Making sure the header looks good without relying only on word-break and overflow-wrap.
  • Expanding the implementation into a more complete responsive fix. I expect this PR to include at least 30+ lines of meaningful code changes, not just a few CSS properties.

Please push the requested changes within the next 24 hours. I'll review it again after the update.

Comment thread index/css/style.css
white-space: normal;
max-width: 100%;
}

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gauri9368gupta-maker

The current changes still rely only on overflow-wrap and word-break to prevent the overflow. This doesn't fully address the requested review changes.

Please update the PR by:

  • Use responsive font sizing (e.g. clamp()).
  • Add media queries to improve the layout across 320px, 360px, 393px, and 430px screen widths.
  • Adjust spacing/alignment where necessary so the header remains readable without relying only on text wrapping.
  • Expand the implementation into a more complete responsive solution.

Once these changes are made, I'll review the PR again.

@udaycodespace
udaycodespace self-requested a review July 27, 2026 06:32
@udaycodespace

Copy link
Copy Markdown
Owner

This PR is being closed due to inactivity.

The requested review changes were not addressed within the given timeframe. Please complete the requested improvements and submit a new PR when it's ready.

Thank you for your contribution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ECSoC26-L1 Easy difficulty, auto-assigned by Sentinel — 5 points ECSoC26 Required label for a PR to be eligible for Sentinel scoring redo Reviewed — needs changes before it can be merged

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Leaderboard header overflows on mobile screens

2 participants