From 16f5c732b92ddc226677df16dc617b76b0e0fddd Mon Sep 17 00:00:00 2001
From: Charlotte Dann <pouretrebelle@github.com>
Date: Fri, 5 Jul 2024 13:15:27 +0100
Subject: [PATCH 1/2] 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
---
 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}}>

From 352203a2b7ccbf21f92c6bf567ee5dd285b17d71 Mon Sep 17 00:00:00 2001
From: Charlotte Dann <pouretrebelle@github.com>
Date: Fri, 5 Jul 2024 13:28:41 +0100
Subject: [PATCH 2/2] Add changeset

---
 .changeset/polite-rivers-lay.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/polite-rivers-lay.md

diff --git a/.changeset/polite-rivers-lay.md b/.changeset/polite-rivers-lay.md
new file mode 100644
index 00000000..df7a2349
--- /dev/null
+++ b/.changeset/polite-rivers-lay.md
@@ -0,0 +1,5 @@
+---
+'@primer/gatsby-theme-doctocat': patch
+---
+
+Fix content blowout