Fix content blowout (#739)

* Fix width blowout with wide content

In React Brand there are a few pages where the content on large screens
is wider than other pages. At certain breakpoints it also overlaps the
navigation.

This is a quirk of a flex child not collapsing where its children have
wider content than the flex calculation. The default min-width is auto,
and since there are children with width: 100%, auto corresponds
to max-content, which causes the blowout. To fix this we can set the
min-width to 0, which will make the children respect the flex calculation.

See https://css-tricks.com/flexbox-truncated-text/#aa-the-solution-is-min-width-0-on-the-flex-child

* Add changeset

Author: pouretrebelle

.changeset/polite-rivers-lay.md

@@ -0,0 +1,5 @@
+---
+'@primer/gatsby-theme-doctocat': patch
+---
+
+Fix content blowout

theme/src/components/layout.js

@@ -108,7 +108,7 @@ function Layout({children, pageContext, path}) {
               <TableOfContents aria-labelledby="toc-heading" items={pageContext.tableOfContents.items} />
             </Box>
           ) : null}
-          <Box sx={{width: '100%', maxWidth: '960px'}}>
+          <Box sx={{width: '100%', maxWidth: '960px', minWidth: 0}}>
             <Box as="main" id="skip-nav" sx={{mb: 4}}>
               {breadcrumbData.length > 1 ? (
                 <Breadcrumbs sx={{mb: 4}}>