fix(explore): keep leaderboard rank cell aligned across emoji and numeric ranks (closes #320)

[SakethSumanBathini]

Summary

Fixes the vertical alignment of the leaderboard rank cell (#320). Worth flagging up front that the issue's
details didn't match the code, so this targets a different file than the one named — I've explained the
reasoning on the issue as well.

• src/components/LeaderboardTable.tsx doesn't exist; the leaderboard is src/app/explore/page.tsx (the
  "Leaderboard" nav link points at /explore).
• The row container there already had alignItems: "center", so the change the issue describes was
  already in place.

What does cause an offset on some rows: the rank cell renders 🥇🥈🥉 for ranks 1-3 and plain digits for
the rest. Emoji resolve to a colour-emoji font whose vertical metrics differ from the body font, so the
rank span's line box isn't the same height on the top-3 rows as on the others. The score span directly
below already guards against this with lineHeight: 1; the rank span didn't.

Related Issue

Closes #320

Type of Change

• Bug fix
• New feature
• Documentation update
• Refactor
• Chore / dependency update

Changes Made

• src/app/explore/page.tsx — the rank cell now centres its glyph in a deterministic box:
  display: inline-flex with alignItems/justifyContent: center and lineHeight: 1, so the rendered
  character sits in the same place whichever font supplies it. textAlign: "center" was dropped in the
  same edit because it has no effect on a flex container; justifyContent replaces it.
• Same file, two lines up: removed a stray // Replace line 171 with this: comment and re-indented the
  const avatar line, which had been committed at column 0. Small, but it's inside the block this PR
  touches.

AI Usage

• I did not use AI for any part of the code in this PR
• I used AI for coding (specify which tool below) and I fully understand every change I made

Used Claude. On side effects: switching the rank span to inline-flex means its children are flex items,
which is why textAlign was replaced rather than kept. minWidth: 32px and flexShrink: 0 are unchanged,
so the column width and the row layout are the same as before.

Screenshots (if UI change)

Rank cell, avatar, name, and score all sit on a consistent centre line. Note the mock ships two fixtures,
so both visible ranks are medal emoji — the digit-rank case isn't exercised by the default fixtures.

Checklist

• I was assigned to the issue before opening this PR
• My branch is up to date with main
• Code works locally and I have tested it
• No console.log left in src/
• If schema changed — both schema.sql and a new migration file are included
• If this is a UI change — I read DESIGN.md and followed the design system (colors, spacing, typography, components)
• Docs updated if needed
• PR title follows Conventional Commits format
• This PR description is written in my own words

Summary by CodeRabbit

• Style
  • Improved leaderboard rank indicator alignment and presentation.
  • Preserved existing contributor and organization avatar and rank displays.

[github-actions]

Welcome to OSSfolio, @SakethSumanBathini! 🎉

Thank you for opening this pull request and contributing to the open-source community! 🚀

To ensure a smooth review process, please make sure you have:

• Checked that your changes work locally and compile cleanly.
• Followed the guidelines outlined in CONTRIBUTING.md.
• Linked your PR to an open issue (e.g. Closes #ISSUE_NUMBER).

We will review your PR as soon as possible. Happy coding! 💻✨

[coderabbitai]

📝 Walkthrough

Walkthrough

The explore leaderboard keeps its existing avatar fallback logic and updates rank indicator styling to use an inline-flex centered layout with explicit line height.

Changes

Leaderboard UI

Layer / File(s)	Summary
Rank and avatar rendering src/app/explore/page.tsx	Avatar fallback construction remains intact, while rank indicators use inline-flex alignment and updated line-height styling.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• PRODHOSH/ossfolio#267: Modifies the same explore leaderboard rank indicator.

Suggested labels: ELUSOC, UI, completed

Suggested reviewers: aditya8369, debasmitabose0, utkarshsingh3011

Poem

I’m a bunny with a tidy chart,
Aligning ranks with pixel art.
Avatars fall back, neat and bright,
Flexbox keeps the rows upright.
Hop, hop—clean display tonight!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR applies the requested centered alignment fix for leaderboard rank cells and avatars in the actual /explore implementation.
Out of Scope Changes check	✅ Passed	The remaining edits are minor cleanup and alignment tweaks tied to the leaderboard fix, with no unrelated scope evident.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: fixing leaderboard rank-cell alignment in the explore page for emoji and numeric ranks.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}