Use an inline-size container for <demo-box>

[knowler]

Changes

For the docs site, this resolves the issues of the main content breaking out of its grid column on the page for the Tag component. Given that a demo’s content should be isolated from the page, it makes sense to make it an inline-size container, so that the size of the content doesn’t affect the size of the parent — important when working with nested grid layouts.

Some other changes needed to be made as a consequence of this:

• In all examples that use a wrapper for their contents that use 100% within their styles, I’ve swapped that for 100cqi.
• I’ve also added a wrapping element for all of the tab examples since the Tabs component itself has inline-size containment applied.
• I needed to add a max-inline-size of 100cqi to the <astro-island> to force content to shrink in some cases (e.g. Header).

Testing

Every page that uses <LiveExample> will need to be tested/reviewed visually. Make sure to resize.

Docs

N/A

[CLAassistant]

All committers have signed the CLA.

[mayank99]

Note: This PR supersedes #2381.

[knowler]

Marking this as ready to review even though the tests are failing. Seems like it might be a GH configuration thing?

[mayank99]

Good fix, LGTM!

(Ignore the failing checks, it's a permissions thing)

[r100-stack]

LGTM! 🚀