[Bug]: documentation examples: too much padding

[judfs]

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

Despite having plenty of screen real estate, I cannot sufficiently view your side-by-side code examples. In order to appreciate your samples, I've needed to open dev tools and hack at the style.

The original sample page with firefox maximized.

Notably there is horizontal text overflow in the code sample even though it has a humble 80 char line length.

After turning off this style, the page is much more reasonable

--ifm-container-width-xl: 1320px;

But with just that style changed, the page breaks at non maximized window size. The chart is fully gone. But unhelpful padding persists on the right.

Also turning off this rule leaves something reasonable:

.docItemCol_pwNb {
	/* max-width: 75% !important; */
}

Using more vertical space might be nice too, but at least 20 lines is workable.

My display is 3840x2160 at 100% scaling (Gnome desktop). Looking at it on a 1080p display on windows is also disappointing.

Please update your styles to better use space.

Reproduction

https://react-chartjs-2.js.org/examples/gradient-chart/

chart.js version

unknown

react-chartjs-2 version

master

Possible solution

No response