Fix width blowout with wide content

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

This is a quirk of flexbox not collapsing content that has a width of
100% - the flex child will grow to fit the children (in this case
capped at 960px due to the min-width value) and disregard the flex
container calculation.

min-width: auto; is allowing this blowout, so the way to fix it is to
set the min-width to 0.

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

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}}>