From 5ac2cbb7a35e781f92a1c03779b84579d51871e9 Mon Sep 17 00:00:00 2001
From: Charlotte Dann <pouretrebelle@github.com>
Date: Fri, 5 Jul 2024 13:15:27 +0100
Subject: [PATCH] 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 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/theme/src/components/layout.js b/theme/src/components/layout.js
index 506be661..72b05931 100644
--- a/theme/src/components/layout.js
+++ b/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}}>