Fix price chart growing unbounded on item results page

Wrap the canvas in a fixed-height container so Chart.js's
responsive + maintainAspectRatio:false combo has a stable parent
to size against, instead of feeding back into itself each tick.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
prosolis
2026-05-15 19:09:49 -07:00
parent edb732ee1f
commit 0ec97afafb
2 changed files with 33 additions and 31 deletions

View File

@@ -128,7 +128,9 @@ templ itemResultsBody(d ItemResultsData) {
// Chart data rides on a data- attribute, not <script> content:
// templ interpolates (and escapes) attribute values but treats
// <script> bodies as raw text, leaving { expr } literal.
<canvas id="price-chart" height="120" data-chart={ d.HistoryChartJSON }></canvas>
<div class="relative h-64 w-full">
<canvas id="price-chart" data-chart={ d.HistoryChartJSON }></canvas>
</div>
<script src="/static/vendor/chart.umd.min.js"></script>
<script src="/static/js/price-chart.js"></script>
}