From 37aba4a930d9b3cf1dce817ed12a5f0f76c00fc8 Mon Sep 17 00:00:00 2001
From: Paul Buetow <paul@buetow.org>
Date: Wed, 27 May 2026 21:28:27 +0300
Subject: =?UTF-8?q?showcase:=20fix=20SVG=20viewport=20fill=20=E2=80=94=20u?=
 =?UTF-8?q?se=20position:fixed=20and=20explicit=20px=20dimensions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

width/height="100%" on a standalone SVG file resolves relative to the
browser's default body element, which has 8px margins on all sides, so the
SVG never actually reached the edges of the window.

Fix:
- Add style="position:fixed;top:0;left:0;display:block" to the <svg> root
  so it is taken out of normal flow and positioned flush against the viewport.
- Have rescale() set explicit pixel width/height attributes (via
  window.innerWidth / window.innerHeight) instead of relying on percentage
  inheritance that was broken by the body margin.
- Also remove a bare % sign from an inline JS comment to prevent fmt.Fprintf
  from misinterpreting it as a format verb.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 internal/showcase/rank_history_svg.go | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/internal/showcase/rank_history_svg.go b/internal/showcase/rank_history_svg.go
index 3b299ba..25f1812 100644
--- a/internal/showcase/rank_history_svg.go
+++ b/internal/showcase/rank_history_svg.go
@@ -309,11 +309,12 @@ func GenerateRankHistorySVG(summaries []ProjectSummary) string {
 	// --- Assemble the full SVG ---
 	var svg strings.Builder
 
-	// width/height="100%" makes the SVG fill the browser window.  No viewBox
-	// or preserveAspectRatio here — the JS rescale() function sets the viewBox
-	// to the window size and applies a translate+scale transform on #chart so
-	// the graph always fits the window without letterboxing.
-	svg.WriteString(`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">`)
+	// position:fixed + top/left:0 overrides the browser's default body margin
+	// so the SVG sits flush against all four edges of the viewport.  No width,
+	// height, or viewBox is set here; rescale() writes them as explicit pixel
+	// values derived from window.innerWidth/innerHeight so the chart always
+	// fills the window without letterboxing.
+	svg.WriteString(`<svg xmlns="http://www.w3.org/2000/svg" style="position:fixed;top:0;left:0;display:block">`)
 
 	// Embedded CSS – kept compact but readable.
 	svg.WriteString(`<style>
@@ -394,11 +395,15 @@ var allLG=chartEl.querySelectorAll('.lg');
 var activeIdx=-1;
 
 // rescale keeps the chart group centered and fully visible at any window size.
-// It sets a viewBox matching the window and applies a uniform scale+translate
-// to #chart so that the fixed CHART_W×CHART_H design fits without letterboxing.
+// 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.
 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;
-- 
cgit v1.2.3