Centre the end screen graph

Two separate offsets, both leftovers:

- .end-screen-graph-row carried 4.5rem of right padding against 2rem on the
  left, to clear a fixed icon rail that used to run up the right edge. That
  rail lives in the bottom corners now, so the clearance only pulled the whole
  row 20px left of centre.
- The canvas insets its plot by 52px on the left for the rotated axis title
  and tick labels, but only 20px on the right. That centred the plot inside
  the canvas element while leaving it visibly off-centre inside
  .graph-container's tinted panel - read as a wider empty margin down the
  left-hand side, which is exactly what it was.

Graph box and plot area now both land on the viewport centre, with the WPM and
ACC columns symmetric about it.

1 files changed, 5 insertions, 3 deletions

diff --git a/web/src/chart.js b/web/src/chart.js
index 915de80..c1c994f 100644
--- a/web/src/chart.js
+++ b/web/src/chart.js
@@ -109,9 +109,11 @@ export function niceStep(maxValue, plotSize, pxPerLabel) {
 export function getPlotGeometry(canvas, graphPoints, xMax) {
     const width = canvas.clientWidth;
     const height = canvas.clientHeight;
-    // Room on the left for the rotated axis title plus its tick labels, and
-    // at the bottom for the seconds label.
-    const margin = { top: 14, right: 20, bottom: 42, left: 52 };
+    // Left and right match. The left needs 52px for the rotated axis title and
+    // its tick labels; leaving the right at 20 centred the plot inside the
+    // canvas but not inside .graph-container's visible panel, which read as a
+    // wider empty margin down the left-hand side.
+    const margin = { top: 14, right: 52, bottom: 42, left: 52 };
     const plotW = Math.max(1, width - margin.left - margin.right);
     const plotH = Math.max(1, height - margin.top - margin.bottom);
     const maxWpm = Math.max(1, ...graphPoints.map(p => Math.max(p.wpm, p.raw)), 1);