style: adjust leaderboard component layouts for improved responsiveness

This commit is contained in:
FloPinguin
2026-02-22 17:12:30 +01:00
parent 648a81d05e
commit 4672720f7d
2 changed files with 10 additions and 9 deletions
@@ -214,6 +214,7 @@ export class LeaderboardClanTable extends LitElement {
class="py-4 px-4 text-right font-bold w-32 cursor-pointer hover:text-white/60 transition-colors"
>
<button
class="whitespace-nowrap"
@click=${() => this.handleSort("games")}
aria-sort=${this.sortBy === "games"
? this.sortOrder === "asc"
@@ -230,10 +231,11 @@ export class LeaderboardClanTable extends LitElement {
</button>
</th>
<th
class="py-4 px-4 text-right font-bold hidden md:table-cell cursor-pointer hover:text-white/60 transition-colors"
class="py-4 px-4 text-right font-bold cursor-pointer hover:text-white/60 transition-colors"
title=${translateText("leaderboard_modal.win_score_tooltip")}
>
<button
class="whitespace-nowrap"
@click=${() => this.handleSort("winScore")}
aria-sort=${this.sortBy === "winScore"
? this.sortOrder === "asc"
@@ -250,10 +252,11 @@ export class LeaderboardClanTable extends LitElement {
</button>
</th>
<th
class="py-4 px-4 text-right font-bold hidden md:table-cell cursor-pointer hover:text-white/60 transition-colors"
class="py-4 px-4 text-right font-bold cursor-pointer hover:text-white/60 transition-colors"
title=${translateText("leaderboard_modal.loss_score_tooltip")}
>
<button
class="whitespace-nowrap"
@click=${() => this.handleSort("lossScore")}
aria-sort=${this.sortBy === "lossScore"
? this.sortOrder === "asc"
@@ -345,15 +348,13 @@ export class LeaderboardClanTable extends LitElement {
</div>
</td>
<td
class="py-3 px-4 text-right font-mono text-green-400/90 hidden md:table-cell"
class="py-3 px-4 text-right font-mono text-green-400/90"
>
${clan.weightedWins.toLocaleString("fullwide", {
maximumFractionDigits: 1,
})}
</td>
<td
class="py-3 px-4 text-right font-mono text-red-400/90 hidden md:table-cell"
>
<td class="py-3 px-4 text-right font-mono text-red-400/90">
${clan.weightedLosses.toLocaleString("fullwide", {
maximumFractionDigits: 1,
})}
@@ -263,7 +263,7 @@ export class LeaderboardPlayerList extends LitElement {
>
</div>
</div>
<div class="flex-col items-end gap-1 w-20 shrink-0 hidden md:flex">
<div class="flex flex-col items-end gap-1 w-20 shrink-0">
<div class="text-right font-mono text-white font-medium">
${player.games}
<span class="text-[10px] text-white/30 uppercase"
@@ -378,7 +378,7 @@ export class LeaderboardPlayerList extends LitElement {
<div
class="h-full overflow-y-auto overflow-x-auto rounded-xl border border-white/5 bg-black/20"
>
<div class="min-w-[28rem] flex flex-col h-full">
<div class="min-w-[36rem] flex flex-col h-full">
<div
class="flex items-center text-[10px] uppercase tracking-wider text-white/40 font-bold px-4 py-4 border-b border-white/5 bg-white/2"
>
@@ -391,7 +391,7 @@ export class LeaderboardPlayerList extends LitElement {
<div class="w-20 text-right">
${translateText("leaderboard_modal.elo")}
</div>
<div class="w-20 text-right hidden md:block">
<div class="w-20 text-right">
${translateText("leaderboard_modal.games")}
</div>
<div class="w-20 text-right pr-4">