From 08a231bf53be01412d3809acd88a5ae7646658a6 Mon Sep 17 00:00:00 2001
From: Matt Jones <matthew.jones@tngtech.com>
Date: Thu, 29 Jul 2021 11:12:40 +0200
Subject: [PATCH] Add scrollbar to leaderboard

---
 .../components/leaderboard/leaderboard.css    | 12 ++++-
 .../components/leaderboard/leaderboard.js     | 54 ++++++++++---------
 2 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/src/client/components/leaderboard/leaderboard.css b/src/client/components/leaderboard/leaderboard.css
index 35c0e886..ad1d1d28 100644
--- a/src/client/components/leaderboard/leaderboard.css
+++ b/src/client/components/leaderboard/leaderboard.css
@@ -1,8 +1,18 @@
 .Playername {
-
   min-width: 120%;
   max-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+
+div.table-container {
+  max-height: 14em;
+  overflow-y: auto;
+}
+
+div.table-container thead {
+  position: sticky;
+  top: 0;
+  background-color: white;
 }
\ No newline at end of file
diff --git a/src/client/components/leaderboard/leaderboard.js b/src/client/components/leaderboard/leaderboard.js
index 876de16f..cbd7f907 100644
--- a/src/client/components/leaderboard/leaderboard.js
+++ b/src/client/components/leaderboard/leaderboard.js
@@ -20,33 +20,35 @@ class Leaderboard extends React.Component {
     return (
       <Card>
         <CardHeader>Statistics</CardHeader>
-        <Table size="sm">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Passed</th>
-              <th>Card</th>
-              <th>Score</th>
-            </tr>
-          </thead>
-          <tbody>
-            {this.props.scores.map((val, idx) =>
-              <tr key={idx}>
-                <td>
-                  <div className="Playername">
-                    {this.props.names[idx]}
-                  </div>
-                  {parseInt(this.props.playerID) === idx && <div><strong>(you)</strong></div>}
-                </td>
-                <td>
-                  {hasPassed(idx, this) && <div align="center">&#10003;</div>}
-                </td>
-                <td><strong>{this.props.cards[idx]}</strong></td>
-                <td><Badge>{val}</Badge></td>
+        <div className='table-container'>
+          <Table size="sm">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Passed</th>
+                <th>Card</th>
+                <th>Score</th>
               </tr>
-            )}
-          </tbody>
-        </Table>
+            </thead>
+            <tbody>
+              {this.props.scores.map((val, idx) =>
+                <tr key={idx}>
+                  <td>
+                    <div className="Playername">
+                      {this.props.names[idx]}
+                    </div>
+                    {parseInt(this.props.playerID) === idx && <div><strong>(you)</strong></div>}
+                  </td>
+                  <td>
+                    {hasPassed(idx, this) && <div align="center">&#10003;</div>}
+                  </td>
+                  <td><strong>{this.props.cards[idx]}</strong></td>
+                  <td><Badge>{val}</Badge></td>
+                </tr>
+              )}
+            </tbody>
+          </Table>
+        </div>
       </Card >
     );
   }