Fix overflow issues in PageLayout.Content (primer#2075)

* Fix overflow issues in PageLayout.Content

* Update PageLayout story

* Prettier

* Create gentle-countries-rest.md

* Fix merge errors

* Update src/PageLayout/PageLayout.tsx

* Update snapshot

Co-authored-by: Dusty Greif <dustin.greif@gmail.com>

Author: 2 people

.changeset/gentle-countries-rest.md

@@ -0,0 +1,9 @@
+---
+"@primer/react": patch
+---
+
+Fix overflow issues in `PageLayout.Content`
+
+| Before | After |
+|--------|--------|
+| <img width="1224" alt="image" src="https://user-images.githubusercontent.com/3026298/167502059-81e0ef9e-2fd6-40fe-b1f1-708368286578.png"> | <img width="1247" alt="image" src="https://user-images.githubusercontent.com/3026298/167502084-1c4f247e-2713-4419-8f4c-bb1a20e24dca.png"> |

src/PageLayout/PageLayout.stories.tsx

@@ -271,6 +271,21 @@ export const PullRequestPage = () => (
     </PageLayout.Header>
     <PageLayout.Content>
       <Box sx={{border: '1px solid', borderRadius: 2, borderColor: 'border.default', height: 200}}></Box>
+      <Box
+        sx={{
+          maxWidth: '100%',
+          overflowX: 'auto',
+          border: '1px solid',
+          whiteSpace: 'nowrap',
+          borderColor: 'border.default',
+          mt: 3,
+          p: 3,
+          borderRadius: 2
+        }}
+      >
+        This box has really long content. If it is too long, it will cause x overflow and should show a scrollbar. When
+        this overflows, it should not break to overall page layout!
+      </Box>
     </PageLayout.Content>
     <PageLayout.Pane>
       <Box sx={{display: 'flex', flexDirection: 'column', gap: 3}}>

src/PageLayout/PageLayout.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {Box} from '..'
 import {BetterSystemStyleObject, merge, SxProp} from '../sx'
+import {Box} from '..'
 
 const REGION_ORDER = {
   header: 0,
@@ -238,7 +238,8 @@ const Content: React.FC<PageLayoutContentProps> = ({width = 'full', children, sx
           // than the pane region on wide viewports if its contents are too wide.
           flexBasis: 0,
           flexGrow: 1,
-          flexShrink: 1
+          flexShrink: 1,
+          minWidth: 1 // Hack to prevent overflowing content from pushing the pane region to the next line
         },
         sx
       )}

src/PageLayout/__snapshots__/PageLayout.test.tsx.snap

@@ -28,6 +28,7 @@ exports[`PageLayout renders condensed layout 1`] = `
   -webkit-flex-shrink: 1;
   -ms-flex-negative: 1;
   flex-shrink: 1;
+  min-width: 1px;
 }
 
 .c5 {
@@ -246,6 +247,7 @@ exports[`PageLayout renders default layout 1`] = `
   -webkit-flex-shrink: 1;
   -ms-flex-negative: 1;
   flex-shrink: 1;
+  min-width: 1px;
 }
 
 .c5 {
@@ -491,6 +493,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   -webkit-flex-shrink: 1;
   -ms-flex-negative: 1;
   flex-shrink: 1;
+  min-width: 1px;
 }
 
 .c5 {
@@ -729,6 +732,7 @@ exports[`PageLayout renders with dividers 1`] = `
   -webkit-flex-shrink: 1;
   -ms-flex-negative: 1;
   flex-shrink: 1;
+  min-width: 1px;
 }
 
 .c5 {