fix; improvement proposal for the leaderboard buttons

[martinIvovIv]

Description:

Changes the leaderboard buttons to look more like other buttons per suggestion by @FloPinguin

Please complete the following:

• I have added screenshots for all UI updates
• I process any text displayed to the user through translateText() and I've added it to the en.json file
• I have added relevant tests to the test directory
• I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced

---

Screenshots:

Before change:

After change:

After change hover:

Mobile:

##Discord username: martoi

---

Signed-off-by: MartinIvovIv https://github.com/martinIvovIv

[coderabbitai]

Walkthrough

The left sidebar gained visual enhancements through additional styling classes applied to wrapper divs. The changes add padding, background color with hover effects, borders, rounded corners, and color transitions. No functional or logical modifications were made.

Changes

Cohort / File(s)	Summary
Sidebar Styling Enhancement src/client/graphics/layers/GameLeftSidebar.ts	Added CSS classes for improved visual appearance: padding, translucent gray background with hover state, border, rounded corners, and color transition effects on wrapper divs.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

The sidebar now gleams with a gentle glow,
Padding and borders help colors flow,
Hover effects dance as users explore,
Simple styled touches, nothing more! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: styling improvements to leaderboard buttons to match other UI buttons, which aligns with the changeset.
Description check	✅ Passed	The description is directly related to the changeset, explaining the styling changes to leaderboard buttons and including before/after screenshots demonstrating the visual improvements.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Important

Action Needed: IP Allowlist Update

If your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:

• ✨ 136.113.208.247/32 (new)
• 34.170.211.100/32
• 35.222.179.152/32

Reviews will stop working after February 8, 2026 if the new IP is not added to your allowlist.

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/client/graphics/layers/GameLeftSidebar.ts`:
- Around line 131-132: The clickable div that invokes toggleTeamLeaderboard in
GameLeftSidebar.ts needs keyboard accessibility added: give that div
role="button", a tabindex="0", and wire its keyboard handler to the same keydown
handler used elsewhere (handleKeyDown or the existing handler bound for other
clickable sidebars) so Enter/Space trigger this.toggleTeamLeaderboard; update
the element attributes and ensure the keydown method references
toggleTeamLeaderboard so keyboard users can activate it.
- Around line 115-118: The div acting as a button in the GameLeftSidebar
template should be made keyboard-accessible: add role="button" and tabindex="0"
attributes to the element and attach an `@keydown` handler that listens for Enter
and Space keys and invokes the existing toggleLeaderboard() method; ensure the
handler prevents default for Space to avoid page scroll and normalizes checks
for event.key === "Enter" or event.key === " " / event.code === "Space".

[ryanbarlow97]

I'm thinking about how the buttons move, they should always be on the top, feels odd to "move" the button? like sometimes its above everything, other times its below the team you're on

[martinIvovIv]

@ryanbarlow97 The first screenshot is from a free for all game, the second screenshot with "Your team" text is in a teams game, if this is what you mean. Could you elaborate more ?

Also the text with "Your team: Purple" appears on teams games but dissapears after the game starts. If anything, I can make another PR and swap the position of the text and the buttons in multiplayer games.