fix(PageLayout): add maxWidth to container (#2502)

* fix(PageLayout): add maxWidth to container * chore: add changeset * test: update snapshots
primer · Oct 31, 2022 · 6199b10 · 6199b10
1 parent 7ea92ab
commit 6199b10
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 1 deletion.
diff --git a/.changeset/angry-wombats-burn.md b/.changeset/angry-wombats-burn.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Add maxWidth to container of PageLayout.{Pane, Content}
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
@@ -98,7 +98,7 @@ const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
               return (
                 <>
                   {slots.Header}
-                  <Box sx={{display: 'flex', flex: '1 1 100%', flexWrap: 'wrap'}}>{children}</Box>
+                  <Box sx={{display: 'flex', flex: '1 1 100%', flexWrap: 'wrap', maxWidth: '100%'}}>{children}</Box>
                   {slots.Footer}
                 </>
               )

diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
@@ -25,6 +25,7 @@ exports[`PageLayout renders condensed layout 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  max-width: 100%;
 }
 
 .c6 {
@@ -265,6 +266,7 @@ exports[`PageLayout renders default layout 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  max-width: 100%;
 }
 
 .c6 {
@@ -547,6 +549,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  max-width: 100%;
 }
 
 .c6 {
@@ -829,6 +832,7 @@ exports[`PageLayout renders with dividers 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  max-width: 100%;
 }
 
 .c6 {

diff --git a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
@@ -29,6 +29,7 @@ exports[`SplitPageLayout renders default layout 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
+  max-width: 100%;
 }
 
 .c6 {