Show points in player label even if points is 0

Show full name when hovering over potentially overflowing name in player label
Added more overflow handling

src/lib/Leaderboard.svelte

@@ -26,8 +26,9 @@
 
   ol {
     font-size: 24px;
-    overflow-y: auto;
+    overflow: hidden auto;
     margin: 0 0 0 10px; /* Counter li padding */
+    max-width: min(500px, 100%);
   }
 
   li {

src/lib/PlayerLabel.svelte

@@ -18,8 +18,13 @@
     src={player.picture || DEFAULT_USER_ICON}
     width="32"
   />
-  <span>{name}</span>
-  {#if player.points}<span> - </span><span>{player.points} points</span>{/if}
+  <span>
+    <span class="name" title={name}>{name}</span>
+    {#if player.points !== undefined}
+      <span class="separator">-</span>
+      <span>{player.points} points</span>
+    {/if}
+  </span>
 </div>
 
 <style>
@@ -28,6 +33,7 @@
     vertical-align: middle;
     align-items: center;
     font-size: 24px;
+    max-width: 100%;
 
     & > img {
       clip-path: inset(0% round 50%);
@@ -36,12 +42,23 @@
     & > span {
       margin-left: 10px;
       margin-right: 20px;
-      overflow: hidden;
-      text-overflow: ellipsis;
+
+      /* Prevent overflow */
+      display: flex;
+      min-width: 0;
       white-space: nowrap;
     }
   }
 
+  .name {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .separator {
+    padding: 0 10px;
+  }
+
   .host {
     color: orange;
   }

src/routes/game/[gameId=id]/answer/+page.svelte

@@ -41,12 +41,12 @@
   <div id="definition-container">
     <input
       bind:value={answer}
-      use:focus
       class:shake={status === "incorrect"}
       disabled={status === "waiting"}
       on:keyup={onKeyUp}
       placeholder="Type answer here..."
       type="text"
+      use:focus
     />
     {#if data.wordClass}<p id="word-class">{data.wordClass}</p>{/if}
     <p id="definition">{data.definition}</p>
@@ -63,10 +63,12 @@
       border-bottom: 1px dashed darkgrey;
       height: 1em;
       font-weight: bold;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: inline-block;
       vertical-align: text-top;
+
+      /* Prevent overflow */
+      display: inline-block;
+      overflow-x: clip;
+      text-overflow: ellipsis;
       white-space: nowrap;
     }
   </style>

src/routes/game/[gameId=id]/end/+page.svelte

@@ -97,6 +97,7 @@
     place-items: center;
 
     & > * {
+      min-width: 0;
       box-sizing: border-box;
     }
   }
@@ -120,11 +121,12 @@
   #leaderboard-container {
     display: flex;
     flex-direction: column;
+    max-width: 100%;
   }
 
   @media (aspect-ratio > 1) {
     #center-container {
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
     #leaderboard-container {
@@ -138,7 +140,7 @@
 
   @media (aspect-ratio < 1) {
     #center-container {
-      grid-template-rows: 1fr 1fr;
+      grid-template-rows: repeat(2, minmax(0, 1fr));
     }
 
     #leaderboard-container {