From 27c4d5f02691bc897ffd5842f831cb7ca96a6a38 Mon Sep 17 00:00:00 2001
From: FloPinguin <25036848+FloPinguin@users.noreply.github.com>
Date: Sun, 22 Feb 2026 17:54:28 +0100
Subject: [PATCH] style: enhance leaderboard component layout for improved
 responsiveness and usability

---
 .../leaderboard/LeaderboardClanTable.ts       | 207 ++++++++++--------
 .../leaderboard/LeaderboardPlayerList.ts      |  64 ++++--
 2 files changed, 155 insertions(+), 116 deletions(-)

diff --git a/src/client/components/leaderboard/LeaderboardClanTable.ts b/src/client/components/leaderboard/LeaderboardClanTable.ts
index 25ff090b9..a1e428404 100644
--- a/src/client/components/leaderboard/LeaderboardClanTable.ts
+++ b/src/client/components/leaderboard/LeaderboardClanTable.ts
@@ -196,22 +196,28 @@ export class LeaderboardClanTable extends LitElement {
 
     return html`
       <div class="h-full">
-        <div
-          class="h-full overflow-y-auto overflow-x-auto border border-white/5 bg-black/20"
-        >
-          <table class="w-full text-sm border-collapse">
-            <thead class="sticky top-0 z-10">
+        <div class="h-full flex flex-col border border-white/5 bg-black/20">
+          <table class="w-full text-sm border-collapse table-fixed shrink-0">
+            <colgroup>
+              <col style="width: 4rem" />
+              <col />
+              <col style="width: 8rem" />
+              <col style="width: 6rem" />
+              <col style="width: 6rem" />
+              <col style="width: 6rem" />
+            </colgroup>
+            <thead>
               <tr
                 class="text-white/40 text-[10px] uppercase tracking-wider border-b border-white/5 bg-white/2"
               >
-                <th class="py-4 px-4 text-center font-bold w-16">
+                <th class="py-4 px-4 text-center font-bold">
                   ${translateText("leaderboard_modal.rank")}
                 </th>
                 <th class="py-4 px-4 text-left font-bold">
                   ${translateText("leaderboard_modal.clan")}
                 </th>
                 <th
-                  class="py-4 px-4 text-right font-bold w-32 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"
                 >
                   <button
                     class="whitespace-nowrap uppercase"
@@ -294,92 +300,109 @@ export class LeaderboardClanTable extends LitElement {
                 </th>
               </tr>
             </thead>
-            <tbody>
-              ${sorted.map((clan, index) => {
-                const displayRank = index + 1;
-                const rankColor =
-                  displayRank === 1
-                    ? "text-yellow-400 bg-yellow-400/10 ring-1 ring-yellow-400/20"
-                    : displayRank === 2
-                      ? "text-slate-300 bg-slate-400/10 ring-1 ring-slate-400/20"
-                      : displayRank === 3
-                        ? "text-amber-600 bg-amber-600/10 ring-1 ring-amber-600/20"
-                        : "text-white/40 bg-white/5";
-                const rankIcon =
-                  displayRank === 1
-                    ? "👑"
-                    : displayRank === 2
-                      ? "🥈"
-                      : displayRank === 3
-                        ? "🥉"
-                        : String(displayRank);
-
-                return html`
-                  <tr
-                    class="border-b border-white/5 hover:bg-white/[0.07] transition-colors group"
-                  >
-                    <td class="py-3 px-4 text-center">
-                      <div
-                        class="w-10 h-10 mx-auto flex items-center justify-center rounded-lg font-bold font-mono text-lg ${rankColor}"
-                      >
-                        ${rankIcon}
-                      </div>
-                    </td>
-                    <td class="py-3 px-4 font-bold text-blue-300">
-                      <div
-                        class="px-2.5 py-1 rounded bg-blue-500/10 border border-blue-500/20 inline-block"
-                      >
-                        ${clan.clanTag}
-                      </div>
-                    </td>
-                    <td class="py-3 px-4 text-right">
-                      <div class="flex flex-col items-end gap-1">
-                        <span class="text-white font-mono font-medium"
-                          >${clan.games.toLocaleString()}</span
-                        >
-                        <div
-                          class="w-24 h-1 bg-white/10 rounded-full overflow-hidden"
-                        >
-                          <div
-                            class="h-full bg-blue-500/50 rounded-full"
-                            style="width: ${(clan.games / maxGames) * 100}%"
-                          ></div>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      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">
-                      ${clan.weightedLosses.toLocaleString("fullwide", {
-                        maximumFractionDigits: 1,
-                      })}
-                    </td>
-                    <td class="py-3 px-4 text-right pr-6">
-                      <div class="inline-flex flex-col items-end">
-                        <span
-                          class="font-mono font-bold ${clan.weightedWLRatio >= 1
-                            ? "text-green-400"
-                            : "text-red-400"}"
-                          >${clan.weightedWLRatio.toLocaleString("fullwide", {
-                            maximumFractionDigits: 2,
-                          })}</span
-                        >
-                        <span
-                          class="text-[10px] uppercase text-white/30 font-bold tracking-wider"
-                          >${translateText("leaderboard_modal.ratio")}</span
-                        >
-                      </div>
-                    </td>
-                  </tr>
-                `;
-              })}
-            </tbody>
           </table>
+          <div
+            class="flex-1 overflow-y-auto overflow-x-auto scrollbar-thin scrollbar-thumb-white/20"
+          >
+            <table class="w-full text-sm border-collapse table-fixed">
+              <colgroup>
+                <col style="width: 4rem" />
+                <col />
+                <col style="width: 8rem" />
+                <col style="width: 6rem" />
+                <col style="width: 6rem" />
+                <col style="width: 6rem" />
+              </colgroup>
+              <tbody>
+                ${sorted.map((clan, index) => {
+                  const displayRank = index + 1;
+                  const rankColor =
+                    displayRank === 1
+                      ? "text-yellow-400 bg-yellow-400/10 ring-1 ring-yellow-400/20"
+                      : displayRank === 2
+                        ? "text-slate-300 bg-slate-400/10 ring-1 ring-slate-400/20"
+                        : displayRank === 3
+                          ? "text-amber-600 bg-amber-600/10 ring-1 ring-amber-600/20"
+                          : "text-white/40 bg-white/5";
+                  const rankIcon =
+                    displayRank === 1
+                      ? "👑"
+                      : displayRank === 2
+                        ? "🥈"
+                        : displayRank === 3
+                          ? "🥉"
+                          : String(displayRank);
+
+                  return html`
+                    <tr
+                      class="border-b border-white/5 hover:bg-white/[0.07] transition-colors group"
+                    >
+                      <td class="py-3 px-4 text-center">
+                        <div
+                          class="w-10 h-10 mx-auto flex items-center justify-center rounded-lg font-bold font-mono text-lg ${rankColor}"
+                        >
+                          ${rankIcon}
+                        </div>
+                      </td>
+                      <td class="py-3 px-4 font-bold text-blue-300">
+                        <div
+                          class="px-2.5 py-1 rounded bg-blue-500/10 border border-blue-500/20 inline-block"
+                        >
+                          ${clan.clanTag}
+                        </div>
+                      </td>
+                      <td class="py-3 px-4 text-right">
+                        <div class="flex flex-col items-end gap-1">
+                          <span class="text-white font-mono font-medium"
+                            >${clan.games.toLocaleString()}</span
+                          >
+                          <div
+                            class="w-24 h-1 bg-white/10 rounded-full overflow-hidden"
+                          >
+                            <div
+                              class="h-full bg-blue-500/50 rounded-full"
+                              style="width: ${(clan.games / maxGames) * 100}%"
+                            ></div>
+                          </div>
+                        </div>
+                      </td>
+                      <td
+                        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"
+                      >
+                        ${clan.weightedLosses.toLocaleString("fullwide", {
+                          maximumFractionDigits: 1,
+                        })}
+                      </td>
+                      <td class="py-3 px-4 text-right pr-6">
+                        <div class="inline-flex flex-col items-end">
+                          <span
+                            class="font-mono font-bold ${clan.weightedWLRatio >=
+                            1
+                              ? "text-green-400"
+                              : "text-red-400"}"
+                            >${clan.weightedWLRatio.toLocaleString("fullwide", {
+                              maximumFractionDigits: 2,
+                            })}</span
+                          >
+                          <span
+                            class="text-[10px] uppercase text-white/30 font-bold tracking-wider"
+                            >${translateText("leaderboard_modal.ratio")}</span
+                          >
+                        </div>
+                      </td>
+                    </tr>
+                  `;
+                })}
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     `;
diff --git a/src/client/components/leaderboard/LeaderboardPlayerList.ts b/src/client/components/leaderboard/LeaderboardPlayerList.ts
index d62da69cd..5763b0f9b 100644
--- a/src/client/components/leaderboard/LeaderboardPlayerList.ts
+++ b/src/client/components/leaderboard/LeaderboardPlayerList.ts
@@ -375,37 +375,53 @@ export class LeaderboardPlayerList extends LitElement {
     return html`
       <div class="h-full">
         <div
-          class="h-full overflow-y-auto overflow-x-auto border border-white/5 bg-black/20 relative"
+          class="h-full flex flex-col border border-white/5 bg-black/20 relative"
         >
+          <table class="w-full text-sm border-collapse table-fixed shrink-0">
+            <colgroup>
+              <col style="width: 4rem" />
+              <col />
+              <col style="width: 6rem" />
+              <col style="width: 6rem" />
+              <col style="width: 6rem" />
+            </colgroup>
+            <thead>
+              <tr
+                class="text-white/40 text-[10px] uppercase tracking-wider border-b border-white/5 bg-white/2"
+              >
+                <th class="py-4 px-4 text-center font-bold">
+                  ${translateText("leaderboard_modal.rank")}
+                </th>
+                <th class="py-4 px-4 text-left font-bold">
+                  ${translateText("leaderboard_modal.player")}
+                </th>
+                <th class="py-4 px-4 text-right font-bold">
+                  ${translateText("leaderboard_modal.elo")}
+                </th>
+                <th class="py-4 px-4 text-right font-bold">
+                  ${translateText("leaderboard_modal.games")}
+                </th>
+                <th class="py-4 px-4 text-right font-bold pr-6">
+                  ${translateText("leaderboard_modal.win_loss_ratio")}
+                </th>
+              </tr>
+            </thead>
+          </table>
           <div
-            class="virtualizer-container h-full overflow-y-auto scrollbar-thin scrollbar-thumb-white/20 ${this
+            class="virtualizer-container flex-1 overflow-y-auto overflow-x-auto scrollbar-thin scrollbar-thumb-white/20 ${this
               .showStickyUser
               ? "pb-20"
               : "pb-0"}"
             @scroll=${() => this.handleScroll()}
           >
-            <table class="w-full text-sm border-collapse">
-              <thead class="sticky top-0 z-10">
-                <tr
-                  class="text-white/40 text-[10px] uppercase tracking-wider border-b border-white/5 bg-white/2"
-                >
-                  <th class="py-4 px-4 text-center font-bold w-16">
-                    ${translateText("leaderboard_modal.rank")}
-                  </th>
-                  <th class="py-4 px-4 text-left font-bold">
-                    ${translateText("leaderboard_modal.player")}
-                  </th>
-                  <th class="py-4 px-4 text-right font-bold">
-                    ${translateText("leaderboard_modal.elo")}
-                  </th>
-                  <th class="py-4 px-4 text-right font-bold">
-                    ${translateText("leaderboard_modal.games")}
-                  </th>
-                  <th class="py-4 px-4 text-right font-bold pr-6">
-                    ${translateText("leaderboard_modal.win_loss_ratio")}
-                  </th>
-                </tr>
-              </thead>
+            <table class="w-full text-sm border-collapse table-fixed">
+              <colgroup>
+                <col style="width: 4rem" />
+                <col />
+                <col style="width: 6rem" />
+                <col style="width: 6rem" />
+                <col style="width: 6rem" />
+              </colgroup>
               <tbody>
                 ${this.playerData.map((player) => this.renderPlayerRow(player))}
               </tbody>