Followup leaderboard fix... (for mobile)

[FloPinguin]

Description:

Column widths were off for some reason, I thought they were fixed...
So here is a followup PR

Previous:

Now:

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

Please put your Discord username so you can be contacted if a bug or regression is found:

FloPinguin

[coderabbitai]

Walkthrough

Two leaderboard table components received layout adjustments. The second column in LeaderboardClanTable was changed to a fixed width of 5rem, and the corresponding column in LeaderboardPlayerList was set to 12rem. These are styling-only changes with no modifications to data handling or control flow.

Changes

Cohort / File(s)	Summary
Table Column Width Adjustments src/client/components/leaderboard/LeaderboardClanTable.ts, src/client/components/leaderboard/LeaderboardPlayerList.ts	Replaced flexible column widths with explicit fixed widths (5rem and 12rem respectively) in table column groups to improve horizontal layout consistency.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

Columns stand in perfect line,
Five and twelve rem—a design so fine,
Tables aligned with measured care,
Layout balanced, crisp and fair ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description clearly relates to the changeset, explaining that column widths were incorrect and providing before-and-after screenshots demonstrating the UI improvements in the leaderboard.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title 'Followup leaderboard fix... (for mobile)' is directly related to the changes, which adjust column widths in leaderboard tables to fix layout issues, and the PR description confirms this is a follow-up fix for mobile display.

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

---

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]

🧹 Nitpick comments (1)

src/client/components/leaderboard/LeaderboardClanTable.ts (1)

206-206: Add overflow protection to the clan tag cell.

Clan tags are capped at 5 characters by the backend (Util.ts), but the current cell has no truncate or overflow-hidden guard. With table-layout: fixed, the 5rem column can fit the max 5-character tag in most cases, but explicit overflow protection prevents silent text spillover. This matches the pattern used on the player-name cell in LeaderboardPlayerList.ts.

Suggested fix

-                      <td class="py-3 px-4 font-bold text-blue-300">
+                      <td class="py-3 px-4 font-bold text-blue-300 overflow-hidden">
                         <div
-                          class="px-2.5 py-1 rounded bg-blue-500/10 border border-blue-500/20 inline-block"
+                          class="px-2.5 py-1 rounded bg-blue-500/10 border border-blue-500/20 inline-block max-w-full truncate"
                         >
                           ${clan.clanTag}
                         </div>
                       </td>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/client/components/leaderboard/LeaderboardClanTable.ts` at line 206, The
clan-tag column in LeaderboardClanTable (the <col style="width: 5rem" /> and the
corresponding clan tag cell) lacks overflow protection; update the clan tag cell
rendering in the LeaderboardClanTable component to match the player-name pattern
in LeaderboardPlayerList.ts by wrapping the clan tag text in a container or
adding classes that enforce truncation and hidden overflow (e.g., the same
"truncate" / "overflow-hidden" utility classes used for the player-name cell) so
the 5-character tag cannot spill out when table-layout: fixed is applied.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/client/components/leaderboard/LeaderboardClanTable.ts`:
- Line 206: The clan-tag column in LeaderboardClanTable (the <col style="width:
5rem" /> and the corresponding clan tag cell) lacks overflow protection; update
the clan tag cell rendering in the LeaderboardClanTable component to match the
player-name pattern in LeaderboardPlayerList.ts by wrapping the clan tag text in
a container or adding classes that enforce truncation and hidden overflow (e.g.,
the same "truncate" / "overflow-hidden" utility classes used for the player-name
cell) so the 5-character tag cannot spill out when table-layout: fixed is
applied.