Skip to content

Fix truncated stat labels in Hackathon Leaderboard#312

Open
gregv wants to merge 1 commit into
developfrom
fix/leaderboard-stat-label-truncation
Open

Fix truncated stat labels in Hackathon Leaderboard#312
gregv wants to merge 1 commit into
developfrom
fix/leaderboard-stat-label-truncation

Conversation

@gregv
Copy link
Copy Markdown
Contributor

@gregv gregv commented Jun 3, 2026

What

Fixes cut-off labels in the General Statistics section of the Hackathon Leaderboard (visible on /hack/summer-2026), where labels like "GitHub Commits", "Pull Requests", and "Contributors" rendered as "GitHub Com…", "Pull Reques…", "Contributo…".

Why

In narrow column layouts (e.g. the two-column event page), the stat cards are only ~130px wide. The cards used a horizontal layout (icon beside the number+label), which left the label box too little width. The label box couldn't shrink, so it overflowed the card and was clipped by overflow:hidden — and StatLabel additionally had whiteSpace:nowrap + ellipsis, truncating the text.

Changes

src/components/Hackathon/HackathonLeaderboard.js:

  • StatLabel — removed nowrap/overflow/textOverflow:ellipsis, added overflowWrap:break-word so labels wrap instead of truncate.
  • Stat card body — stacked the icon above the number+label (column layout at all breakpoints) so every label gets the full card width.

Reviewer notes

  • This component is shared with the archive's ImpactMetrics, so the readability improvement applies anywhere the leaderboard/impact tiles appear.
  • Verified in-browser at the event-page (narrow column) width: all five labels — GitHub Commits, Pull Requests, Contributors, Issues Closed, Lines of Code — now render fully within their cards with no clipping.

🤖 Generated with Claude Code

The "General Statistics" cards clipped labels like "GitHub Commits",
"Pull Requests", and "Contributors" in narrow column layouts. The
horizontal card layout (icon beside number+label) gave the label box too
little width; it overflowed the card and was clipped by overflow:hidden,
and StatLabel's nowrap+ellipsis truncated it.

- StatLabel: drop nowrap/overflow/ellipsis, add overflowWrap:break-word
  so labels wrap instead of truncating.
- Stat card body: stack the icon above the number+label (column layout at
  all breakpoints) so each label gets the full card width.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Jun 3, 2026

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

Project Deployment Actions Updated (UTC)
frontend-ohack-dev Ready Ready Preview Jun 3, 2026 3:52am

Request Review

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.

1 participant