Fix issue where scroll containers nested inside of PageLayout.Pane wo…

…uld be hard to use on mobile. (#2606) * Set overflow: auto for PageLayout.Pane for larger screen sizes only, new storybook story for testing issues found in code tree. * Create two-melons-swim.md * Update test snapshots.
primer · Dec 2, 2022 · e98bcdf · e98bcdf
1 parent d2e824e
commit e98bcdf
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 11 deletions.
diff --git a/.changeset/two-melons-swim.md b/.changeset/two-melons-swim.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix issue where scroll containers nested inside of PageLayout.Pane would be hard to use on mobile.
diff --git a/src/PageLayout/PageLayout.stories.tsx b/src/PageLayout/PageLayout.stories.tsx
@@ -717,4 +717,27 @@ export const ResizablePane: Story = () => (
   </PageLayout>
 )
 
+export const ScrollContainerWithinPageLayoutPane: Story = () => (
+  <Box sx={{display: 'grid', gridTemplateRows: 'auto 1fr auto', height: '100vh'}}>
+    <Box sx={{overflow: 'auto'}}>
+      <Placeholder label="Above inner scroll container" height={120} />
+      <PageLayout rowGap="none" columnGap="none" padding="none" containerWidth="full">
+        <PageLayout.Pane position="start" padding="normal" divider="line" sticky>
+          <Box sx={{overflow: 'auto'}}>
+            <PageLayout.Pane padding="normal">
+              <Placeholder label="Inner scroll container" height={800} />
+            </PageLayout.Pane>
+          </Box>
+        </PageLayout.Pane>
+        <PageLayout.Content padding="normal" width="large">
+          <Box sx={{display: 'grid'}}>
+            <Placeholder label="Page content" height={1600} />
+          </Box>
+        </PageLayout.Content>
+      </PageLayout>
+      <Placeholder label="Beneath inner scroll container" height={120} />
+    </Box>
+  </Box>
+)
+
 export default meta
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
@@ -675,7 +675,9 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
               ? ['100%', null, 'clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width))']
               : paneWidths[width],
             padding: SPACING_MAP[padding],
-            overflow: 'auto',
+            [`@media screen and (min-width: ${theme.breakpoints[1]})`]: {
+              overflow: 'auto'
+            },
 
             [`@media screen and (min-width: ${theme.breakpoints[3]})`]: {
               '--pane-max-width': 'calc(100vw - 959px)'

diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap
@@ -69,7 +69,6 @@ exports[`PageLayout renders condensed layout 1`] = `
   --pane-max-width: calc(100vw - 511px);
   width: 100%;
   padding: 0;
-  overflow: auto;
 }
 
 .c3 {
@@ -133,7 +132,7 @@ exports[`PageLayout renders condensed layout 1`] = `
 
 @media screen and (min-width:768px) {
   .c11 {
-    width: 256px;
+    overflow: auto;
   }
 }
 
@@ -351,7 +350,6 @@ exports[`PageLayout renders default layout 1`] = `
   --pane-max-width: calc(100vw - 511px);
   width: 100%;
   padding: 0;
-  overflow: auto;
 }
 
 .c2 {
@@ -425,7 +423,7 @@ exports[`PageLayout renders default layout 1`] = `
 
 @media screen and (min-width:768px) {
   .c11 {
-    width: 256px;
+    overflow: auto;
   }
 }
 
@@ -644,7 +642,6 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
   --pane-max-width: calc(100vw - 511px);
   width: 100%;
   padding: 0;
-  overflow: auto;
 }
 
 .c2 {
@@ -718,7 +715,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
 
 @media screen and (min-width:768px) {
   .c11 {
-    width: 256px;
+    overflow: auto;
   }
 }
 
@@ -913,7 +910,6 @@ exports[`PageLayout renders with dividers 1`] = `
   --pane-max-width: calc(100vw - 511px);
   width: 100%;
   padding: 0;
-  overflow: auto;
 }
 
 .c2 {
@@ -987,7 +983,7 @@ exports[`PageLayout renders with dividers 1`] = `
 
 @media screen and (min-width:768px) {
   .c10 {
-    width: 256px;
+    overflow: auto;
   }
 }
 

diff --git a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap
@@ -104,7 +104,6 @@ exports[`SplitPageLayout renders default layout 1`] = `
   --pane-max-width: calc(100vw - 511px);
   width: 100%;
   padding: 16px;
-  overflow: auto;
 }
 
 .c2 {
@@ -173,7 +172,7 @@ exports[`SplitPageLayout renders default layout 1`] = `
 
 @media screen and (min-width:768px) {
   .c11 {
-    width: 256px;
+    overflow: auto;
   }
 }