Fix sidebar and charts (#175)

Author: eltoder

src/components/GameSidebar.js

@@ -129,13 +129,14 @@ function GameSidebar({ game, scores, leaderboard, pause, endedAt }) {
             />
           ))}
         </List>
-        <Divider style={{ margin: "8px 0" }} />
-        <Typography variant="body2" align="center">
-          <span style={{ fontWeight: 300 }}>
-            {formatDateTime(game.startedAt)}
-          </span>
-        </Typography>
       </div>
+      <Divider style={{ margin: "8px 0" }} />
+      {/* Footer */}
+      <Typography variant="body2" align="center">
+        <span style={{ fontWeight: 300 }}>
+          {formatDateTime(game.startedAt)}
+        </span>
+      </Typography>
     </Paper>
   );
 }

src/components/UserStatistics.js

@@ -1,4 +1,4 @@
-import { ArcElement, Chart as ChartJS } from "chart.js";
+import { ArcElement, Chart as ChartJS, Legend, Tooltip } from "chart.js";
 import { memo } from "react";
 import { Pie } from "react-chartjs-2";
 
@@ -8,7 +8,7 @@ import { makeStyles, useTheme } from "@material-ui/core/styles";
 
 import { formatTime } from "../util";
 
-ChartJS.register(ArcElement);
+ChartJS.register(ArcElement, Tooltip, Legend);
 
 const useStyles = makeStyles((theme) => ({
   statisticsPanel: {
@@ -58,7 +58,7 @@ function UserStatistics({ stats, variant }) {
     plugins: {
       legend: {
         position: "bottom",
-        onClick: (e) => e.stopPropagation(),
+        onClick: () => {}, // disable click to show/hide category
       },
       tooltip: {
         enabled: num.finishedGames > 0,

src/pages/GamePage.js

@@ -475,7 +475,7 @@ function GamePage({ match }) {
         </Box>
         <Box clone order={{ xs: 2, sm: 3 }}>
           <Grid item xs={12} md={3} className={classes.sideColumn}>
-            <Box order={{ xs: 2, md: 1 }}>
+            <Box order={{ xs: 2, md: 1 }} style={{ maxHeight: "100%" }}>
               <GameSidebar
                 game={game}
                 scores={scores}