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.

2 files changed, 11 insertions, 11 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);
diff --git a/web/src/styles.css b/web/src/styles.css
index 5ac7560..4131f64 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -1916,15 +1916,13 @@ body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto 0.5rem auto;
-    /* Matches .end-screen-text's own 2rem side padding, so the WPM/ACC
-       blocks line up with the actual text edges above them, not with the
-       text box's outer (padded) edge. Right side gets extra clearance on
-       top of that - unlike the typing screen's WPM/ACC blocks (fixed
-       position with their own deliberate margin), this row is a normal-flow
-       flex layout, so on any viewport narrower than max-width its own right
-       edge can land directly under the fixed corner icon rail otherwise. */
+    /* Matches .end-screen-text's own 2rem side padding, so the WPM/ACC blocks
+       line up with the actual text edges above them rather than with the text
+       box's outer padded edge. Symmetric: the extra 4.5rem that used to sit
+       on the right cleared a fixed icon rail that ran up the right edge, and
+       that rail now lives in the bottom corners. The asymmetry was pulling
+       the whole graph 20px left of centre. */
     padding: 0 2rem;
-    padding-right: 4.5rem;
 }
 
 .graph-container {