Fix mobile responsiveness in LeaderboardView contributors table#745
Draft
Fix mobile responsiveness in LeaderboardView contributors table#745
Conversation
- Reduced heading sizes on mobile (text-2xl to text-4xl responsive scale) - Added responsive padding to all containers (px-4 sm:px-6 lg:px-8) - Centered view switcher on mobile, right-aligned on larger screens - Reduced gallery grid columns on mobile (4 instead of 8) for better visibility - Added responsive text sizes throughout (text-xs to text-sm scales) - Reduced avatar sizes on mobile (size-14 instead of size-16) - Added responsive spacing (gap-3 sm:gap-4, mb-8 sm:mb-12) - Improved gallery view with proper padding and max-width constraint Agent-Logs-Url: https://github.com/ohcnetwork/leaderboard/sessions/6bf54a99-6410-44e3-a9b4-0eec60c803c1
Claude
AI
changed the title
rithviknishad
requested changes
Apr 7, 2026
Member
rithviknishad
left a comment
rithviknishad
left a comment
There was a problem hiding this comment.
I didn't mean PeopleView.
I meant responsiveness issue in LeaderboardView component in contributors table
- Changed items-center to items-start to allow proper wrapping - Reduced padding on mobile: gap-2 sm:gap-3, px-3 sm:px-4 - Reduced rank column width: w-7 sm:w-8 with responsive icon sizing - Made avatar responsive: size-8 sm:size-9 - Added responsive text sizes: text-xs sm:text-sm for name and points - Fixed name truncation with proper min-w-0 constraint - Added flex-wrap to activity breakdown to prevent horizontal overflow - Made activity badges shrink-0 to maintain consistent sizing - Wrapped RankChangeBadge in shrink-0 div to prevent compression Agent-Logs-Url: https://github.com/ohcnetwork/leaderboard/sessions/1afd3f88-7f1a-4830-90fe-56efe0acd1e7 Co-authored-by: rithviknishad <25143503+rithviknishad@users.noreply.github.com>
Contributor
Author
Fixed in e69a0a0. Applied mobile responsiveness fixes to the LeaderboardView contributors table:
The mobile row now properly wraps content and prevents overflow on small screens. |
Claude
AI
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The LeaderboardView contributors table was not responsive on mobile devices, with horizontal overflow and layout issues causing poor user experience on smaller screens.
What
Applied mobile-first responsive design patterns to the LeaderboardView component's contributors table mobile row.
Why
Mobile users experienced horizontal overflow in the contributors table due to activity badges not wrapping, oversized elements, and insufficient spacing constraints.
How
Mobile Row Layout Improvements:
items-centertoitems-startto allow proper content wrappinggap-2 sm:gap-3,px-3 sm:px-4pt-0.5to rank column for proper vertical alignmentResponsive Sizing:
w-7 sm:w-8with icon sizingh-3.5 w-3.5 sm:h-4 sm:w-4size-8 sm:size-9(reduced from fixedsize-9)text-xs sm:text-smfor name, rank number, and pointsgap-1between name and badge elementsOverflow Prevention:
flex-wrapto activity breakdown badges container to prevent horizontal overflowmin-w-0constraint to name container for proper truncationshrink-0div to prevent compressionshrink-0to maintain consistent sizingmt-0.5spacing to activity breakdown rowType of Change
Packages Affected
@ohcnetwork/leaderboard-api@leaderboard/plugin-runner@leaderboard/plugin-dummycreate-leaderboard-plugincreate-leaderboard-data-repoleaderboard-web(Next.js app)/docs)Quality Checklist
Core Requirements (Mandatory)
Version Management
pnpm changesetfor version-tracked packagesTesting
pnpm testruns successfullypnpm test:coverageto verifyBuild & Type Safety
pnpm build:packagescompletes without errorspnpm --filter <package> typecheck)pnpm --filter leaderboard-web lint(for web app changes)Documentation
/docs) updated if neededPlugin-Specific Requirements
packages/api/src/types.tsScreenshots / Videos
Before
Issue showed horizontal overflow and poor layout on mobile devices in the LeaderboardView contributors table (screenshot referenced in issue).
After
Contributors table now properly wraps content on mobile with responsive sizing, preventing horizontal overflow and improving readability on small screens.