showcase: stretch SVG to fill browser window in both axes (non-uniform scale)

Replace the uniform min(W/CHART_W, H/CHART_H) scale — which left blank bars
along the shorter axis — with independent x/y scales:

  sx = W / CHART_W
  sy = H / CHART_H

This maps the fixed CHART_W × CHART_H design coordinate space exactly onto
the current window dimensions, filling every pixel with no letterboxing.
The centering translate is no longer needed and is removed.

chartEl.getScreenCTM().inverse() handles the two-component transform
correctly, so tooltip hit-testing remains accurate at any window shape.
Tooltip boundary clamping still uses CHART_W / CHART_H (chart coordinates).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 9 insertions, 8 deletions

diff --git a/internal/showcase/rank_history_svg.go b/internal/showcase/rank_history_svg.go
index c030086..fd77c83 100644
--- a/internal/showcase/rank_history_svg.go
+++ b/internal/showcase/rank_history_svg.go
@@ -394,20 +394,21 @@ var allPG=chartEl.querySelectorAll('.pg');
 var allLG=chartEl.querySelectorAll('.lg');
 var activeIdx=-1;
 
-// rescale keeps the chart group centered and fully visible at any window size.
-// Sets explicit pixel width/height (bypassing the body-margin trap that
-// makes percentage-relative sizes fall short in standalone SVG files) and a
-// matching viewBox, then applies a uniform scale+translate to #chart so the
-// CHART_W x CHART_H design fills the window exactly along the limiting axis.
+// rescale stretches the chart to fill the full browser window in both axes.
+// Sets explicit pixel width/height (bypassing the body-margin trap that makes
+// percentage-relative sizes fall short in standalone SVG files) and a matching
+// viewBox, then applies independent x/y scales so the chart always occupies
+// every pixel — width tracks window width, height tracks window height.
+// chartEl.getScreenCTM().inverse() accounts for both scale factors, keeping
+// tooltip hit-testing correct regardless of the window aspect ratio.
 function rescale(){
   var W=window.innerWidth||document.documentElement.clientWidth;
   var H=window.innerHeight||document.documentElement.clientHeight;
   svgEl.setAttribute('width',W);
   svgEl.setAttribute('height',H);
   svgEl.setAttribute('viewBox','0 0 '+W+' '+H);
-  var s=Math.min(W/CHART_W,H/CHART_H);
-  var tx=(W-CHART_W*s)/2, ty=(H-CHART_H*s)/2;
-  chartEl.setAttribute('transform','translate('+tx+','+ty+') scale('+s+')');
+  var sx=W/CHART_W, sy=H/CHART_H;
+  chartEl.setAttribute('transform','scale('+sx+','+sy+')');
 }
 window.addEventListener('resize',rescale);
 rescale();