Blog

All posts
John Damask · 2026-03-14
devlogfrontendfeatures

The Bug

A page about NASA's STELLA instrument had a Chart.js chart that grew to 29,429 pixels tall -- making the page completely unusable. The chart was supposed to show NDVI and temperature readings from a walk across an atrium. Instead, it devoured the entire layout and buried the text below it under a wall of canvas.

The cause was a Chart.js configuration that Claude had been generating: maintainAspectRatio: false inside a container with no explicit height. Without a height constraint, Chart.js keeps resizing the canvas to fill its container, which makes the container taller, which triggers another resize, and so on until the chart is tens of thousands of pixels tall.

How Widespread Was It?

I pulled all 950 generated pages from the production S3 bucket and scanned for the same pattern. 296 pages use Chart.js, 96 of those set maintainAspectRatio: false, and 49 of those 96 have no height constraint on the parent container -- the exact combination that causes the blowup. About 5% of all pages were sitting on a ticking bomb. Whether any given page actually explodes depends on browser timing and layout conditions, which is why the bug was intermittent and hard to notice.

First Fix, Then the Real Fix

Since Claude generates these pages from prompts, the fix had to go in the prompt -- tell Claude not to produce the dangerous pattern in the first place.

My first attempt was nuanced: explain when maintainAspectRatio: false is safe (with a height-constrained wrapper directly around the canvas) and when it isn't. I tested it by editing the broken STELLA page, adding height: 400px to the chart container. The chart stopped growing infinitely, but now it overflowed its container and bled into the text below. The container held titles, buttons, and the canvas together -- constraining its height clipped everything.

Second try: put the height on a wrapper div around just the canvas, not the whole container. That worked perfectly. But then the obvious question hit me -- why am I teaching Claude how to use a dangerous option safely when there's no reason to use it at all? These are standalone explainer pages. There's no dashboard layout requiring precise chart dimensions.

The final prompt guidance is four lines: always use maintainAspectRatio: true, never use false, here's why. I tested it on the STELLA page by just flipping false to true -- canvas dropped from 29,429 pixels to 332 pixels. Page looked great.

The Lesson

When you're writing prompts that guide an LLM's code generation, don't give it options you don't need. Every option is a chance to pick wrong. If there's one correct choice for your use case, make it the only choice.