fix(#1803): fix do/don't grids and component content grid

[bdfranck]

This PR addresses the issues identified in GovAlta/ui-components#1803. It makes the following changes:

• Reduces the minimum grid width of the "Do & Don't" columns from 50ch to 36ch
• Swiches the ComponentContent grid to a single column when the table of contents disappears below 1230px width.
• Adds a min-width of 0 to .component-content--content. This prevents wider content from growing the column width past the available space.
• Fixes an undefined class name in ComponentContent

I determined that 36ch is the maximum width at 642px without overflowing the content area.

The header-related issues are captured in this other ticket: GovAlta/ui-components#1438

Checklist:

• I have run a build locally.
• I have tested the functionality.

[netlify]

✅ Deploy Preview for abgov-ui-component-docs ready!

Name	Link
🔨 Latest commit	64ccda0
🔍 Latest deploy log	https://app.netlify.com/sites/abgov-ui-component-docs/deploys/663bb4927df2b70008c3b666
😎 Deploy Preview	https://deploy-preview-153--abgov-ui-component-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[bdfranck]

Here's how it looks in Alpha...

And here's how it looks in this PR:

[bdfranck]

@twjeffery spotted an additional issue that is present on alpha: the content doesn't fill the full width when <624px wide.

Here's how it looks on the production site:

[bdfranck]

I'm exploring what the above issues is...

[bdfranck]

I think I found the source: The ComponentContent column grid template. It keeps 12rem of space for the table of contents even when it disappears below 1230px.

I've updated my PR to switch to one column below 1230px. I also fixed an issue causing an undefined className on component-content--content.

ui-components-docs/src/components/component-content/component-content.css

Lines 46 to 50 in 79096a4

	.component-content--container {
	display: grid;
	grid-template-columns: 1fr 12rem;
	grid-gap: var(--goa-space-2xl);
	}

[bdfranck]

@twjeffery also noticed that the table on the Error Text page was increasing the width of component-content--content. It looks like the table's horizontal scrolling isn't working.

I made the following updates to this PR to address the issue:

• Add min-width: 0 to component-content--content so the column width stays within the container. (As suggested by CSS Tricks)
• Wrap the table with <div style={{position: "relative", overflowX: "auto"}}> so it scrolls

I don't think the wrapper div is a great solution so I'm open to suggestions.

[bdfranck]

@chrisolsen Thanks for the feedback! I've updated my PR with the following changes:

• Removed the scrolling wrapper div from the HelperText table
• Reduced the indentation in component-content.css from 4 to 2 spaces