v0.3.3.

internal/rrd/rrd.go

@@ -134,6 +134,14 @@ func (m *Manager) Graph(ctx context.Context, key, theme string) (string, error)
 		"graph", out,
 		"--imgformat", "PNG",
 		"--start", rg.Start, "--end", "now",
+		// By default rrdtool's --width/--height size only the plot canvas;
+		// the title, legend rows and axis-label margins then pad the final
+		// PNG to something larger and variable (depends on title/legend
+		// text length). --full-size-mode makes --width/--height the exact
+		// *total* image size instead, so the PNG is always precisely
+		// 1200x320 -- matching the CSS aspect-ratio on the <img> exactly,
+		// with no letterboxing from a size mismatch.
+		"--full-size-mode",
 		"--width", "1200", "--height", "320",
 		"--lower-limit", "0", "--alt-autoscale-max", "--rigid",
 		"--slope-mode",

internal/web/assets/app.css

@@ -106,7 +106,7 @@ html[data-theme=light] .theme-toggle .ic-moon{display:block}
 
 .graphs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .graph-image-button{display:block;width:100%;padding:0;border:0;background:var(--field);cursor:zoom-in;overflow:hidden}
-.graph-image-button img{display:block;width:100%;height:auto;aspect-ratio:3.56/1;object-fit:contain;transition:transform .18s ease,opacity .18s ease}
+.graph-image-button img{display:block;width:100%;height:auto;aspect-ratio:1200/320;object-fit:contain;transition:transform .18s ease,opacity .18s ease}
 .graph-image-button:hover img{transform:scale(1.012);opacity:.96}
 
 .lightbox[hidden]{display:none}