From f8bb78103f4434d7fa3ad15d30c5bfee41cf1154 Mon Sep 17 00:00:00 2001
From: Ilker Manap <ilker@Ilkers-MacBook-Pro.local>
Date: Thu, 17 Sep 2026 19:06:53 +0200
Subject: [PATCH] Stop the ranked charts from spilling over the tables below
 them
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bars were wrapped in <div class="chart">, and .chart was already the
fixed-height box the time-series charts are drawn in: 120px, with a border
and a background. A chart that grows a row at a time does not fit in a cage,
so the SVG overflowed it and landed on the table underneath.

Renamed to .ranked, which is a wrapper rather than the mark itself, and
capped at the design width so a wide window scales the box instead of
inflating the 12px labels.

The test reads the class back out of the markup and checks the stylesheet
does not cap it, because the collision was invisible in both files on their
own — each rule was reasonable, and only the shared name was wrong.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 internal/web/charts2.go      |  2 +-
 internal/web/charts2_test.go | 31 +++++++++++++++++++++++++++++++
 internal/web/static/base.css |  8 ++++++--
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/internal/web/charts2.go b/internal/web/charts2.go
index 48d42a7..41e2bf3 100644
--- a/internal/web/charts2.go
+++ b/internal/web/charts2.go
@@ -54,7 +54,7 @@ func HBarChart(rows []Row, colour, unit string) template.HTML {
 	plotW := width - labelW - valueW
 
 	var b strings.Builder
-	fmt.Fprintf(&b, `<div class="chart"><svg viewBox="0 0 %.0f %.0f" role="img" `+
+	fmt.Fprintf(&b, `<div class="ranked"><svg viewBox="0 0 %.0f %.0f" role="img" `+
 		`preserveAspectRatio="xMinYMin meet" aria-label="ranked bars">`, width, height)
 
 	for i, r := range rows {
diff --git a/internal/web/charts2_test.go b/internal/web/charts2_test.go
index 42efd46..fabb221 100644
--- a/internal/web/charts2_test.go
+++ b/internal/web/charts2_test.go
@@ -115,3 +115,34 @@ func TestTheChartScalesToItsContainer(t *testing.T) {
 		t.Error("a fixed pixel width was set on the chart")
 	}
 }
+
+func TestTheRankedWrapperIsNotGivenAFixedHeight(t *testing.T) {
+	// This chart grows a row at a time, so whatever class it wears must not be
+	// one the stylesheet caps. It wore "chart", which is the fixed-height box
+	// the time-series charts live in, and the bars spilled over the table
+	// underneath them.
+	out := string(HBarChart([]Row{{Label: "a", Value: 1}}, "", ""))
+	class := "" // the wrapper's class, read back out of the markup
+	if i := strings.Index(out, `<div class="`); i >= 0 {
+		rest := out[i+len(`<div class="`):]
+		class = rest[:strings.Index(rest, `"`)]
+	}
+	if class == "" {
+		t.Fatalf("no wrapper to check:\n%s", out)
+	}
+
+	css, err := staticFiles.ReadFile("static/base.css")
+	if err != nil {
+		t.Fatal(err)
+	}
+	for _, line := range strings.Split(string(css), "\n") {
+		decl, ok := strings.CutPrefix(strings.TrimSpace(line), "."+class+" ")
+		if !ok || !strings.HasPrefix(decl, "{") {
+			continue
+		}
+		if strings.Contains(decl, "height:") && !strings.Contains(decl, "height: auto") {
+			t.Errorf("%q is capped by the stylesheet, so taller charts overflow it: %s",
+				class, strings.TrimSpace(line))
+		}
+	}
+}
diff --git a/internal/web/static/base.css b/internal/web/static/base.css
index 5198705..1fb1b69 100644
--- a/internal/web/static/base.css
+++ b/internal/web/static/base.css
@@ -164,5 +164,9 @@ select { font: inherit; padding: .35rem .4rem; border: 1px solid var(--line);
 .tile .v { font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
 .tile .k { font-size: .8rem; color: var(--muted); }
 .tile svg { display: block; margin-top: .35rem; }
-.chart { margin: .25rem 0 1rem; }
-.chart svg { display: block; max-width: 100%; height: auto; }
+/* Ranked horizontal bars. A wrapper, not the SVG itself: .chart above is the
+ * fixed-height time-series box, and sharing the name gave these a 120px cage
+ * their taller content overflowed, over the table beneath them. Capped at the
+ * design width so scaling up never inflates the 12px labels. */
+.ranked { margin: .25rem 0 1rem; }
+.ranked svg { display: block; width: 100%; max-width: 720px; height: auto; }