From 7138b694f938b3d5826a1cc77180350533e3d91c Mon Sep 17 00:00:00 2001
From: NewHappyRabbit <newhappyrabbit3@gmail.com>
Date: Fri, 21 Feb 2025 15:32:33 +0200
Subject: [PATCH] Trimmed player names to avoid overflow and scrollbar

---
 src/client/graphics/layers/Leaderboard.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/client/graphics/layers/Leaderboard.ts b/src/client/graphics/layers/Leaderboard.ts
index 514442865..d2a146f29 100644
--- a/src/client/graphics/layers/Leaderboard.ts
+++ b/src/client/graphics/layers/Leaderboard.ts
@@ -180,12 +180,14 @@ export class Leaderboard extends LitElement implements Layer {
       cursor: pointer;
     }
 
+    .player-name {
+      max-width: 10ch;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     @media (max-width: 1000px) {
       .leaderboard {
-        width: 100vw;
-        max-width: 100vw;
-        left: 50%;
-        transform: translateX(-50%);
         top: 60px;
       }
 
@@ -240,7 +242,7 @@ export class Leaderboard extends LitElement implements Layer {
                   @click=${() => this.handleRowClick(player.player)}
                 >
                   <td>${player.position}</td>
-                  <td>${unsafeHTML(player.name)}</td>
+                  <td class="player-name">${unsafeHTML(player.name)}</td>
                   <td>${player.score}</td>
                   <td>${player.gold}</td>
                 </tr>