Trimmed player names to avoid overflow and scrollbar

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>