diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/src/chart.js | 8 | ||||
| -rw-r--r-- | web/src/styles.css | 14 |
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 { |