Per Grafana Canvas docs, the correct way to make elements stay centered
and stretch with panel size is to set 'constraint: { horizontal: scale,
vertical: scale }' on every element AND use margin-style placement
(top + bottom + left + right, all as percentages of the panel) instead
of pixel-based 'top + left + width + height'.
This commit:
- Adds 'constraint: scale/scale' to every canvas element.
- Converts all placements to percentage margins. Hardcoded canvas
geometry (tank, zones, threshold lines, header, footer) uses literal
percentages; per-basin geometry (yp_*, ty_*, etc.) is precomputed in
_templateVarsForNode and emitted as percent values from the substitution.
- Adds derived 'zb_*', 'yb_*', 'tyb_*' substitution vars for bottom
margins of zones, lines, and labels respectively.
- Splits name/value labels left/right of tank centre with a visible gap
between them (was touching) and bumps font size 11 -> 14 for readability.
Result: at any panel/viewport size the tank fills the card with equal
left/right margins (~2.5%) and equal top/bottom margins (~5.26%) for
rim/floor captions, no letterboxing or right-side padding.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
8afc6b9779