Skip to content

feat(ui): refactor staking leaderboard to responsive card layout (#112) - #122

Merged
Lakes41 merged 1 commit into
Adamantine-guild:mainfrom
Alimzy:feat/responsive-staking-leaderboard
Jul 30, 2026
Merged

feat(ui): refactor staking leaderboard to responsive card layout (#112)#122
Lakes41 merged 1 commit into
Adamantine-guild:mainfrom
Alimzy:feat/responsive-staking-leaderboard

Conversation

@Alimzy

@Alimzy Alimzy commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

Summary

Resolves #112 by refactoring the Staking Leaderboard table into a responsive, mobile-first layout using Tailwind CSS flex and grid utilities.
closes #112

Changes

  • Mobile View (< 768px): Transformed table rows into stacked cards with internal uppercase labels (Rank, Address, Staked Amount), eliminating horizontal scrolling down to 320px viewports.
  • Desktop View (≥ 768px): Maintained the multi-column data table structure with sticky/visible headers.
  • Text Overflow Fix: Applied address truncation (truncate) and flexible width constraints to prevent layout breakage on small mobile devices.

Acceptance Criteria

  • No horizontal scrolling on screens as small as 320px.
  • Desktop layout (≥ 1024px) remains a dense data table.
  • Information hierarchy (RankAddressStaked Amount) preserved across all viewports.
  • Exact same dataset retained; no columns removed on mobile.

@Lakes41
Lakes41 merged commit 43be7fb into Adamantine-guild:main Jul 30, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create responsive, mobile-first design for the Staking Leaderboard table

2 participants