From 94be4616145db50cbcb0fe73abb58383a0f87bb8 Mon Sep 17 00:00:00 2001 From: Simon MacDonald Date: Tue, 2 Feb 2021 14:19:31 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=20Fix=20issue=20with=20content?= =?UTF-8?q?=20not=20scrolling=20if=20right=20rail=20has=20focus?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Grid/index.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/Grid/index.js b/src/Grid/index.js index 54cdbe9c..6df835ce 100644 --- a/src/Grid/index.js +++ b/src/Grid/index.js @@ -40,7 +40,10 @@ const Grid = ({ children, ...props }) => ( const GridHeader = styled.div` height: var(--spectrum-global-dimension-size-800); - width: auto; + width: 100%; + position: fixed; + background-color: white; + z-index: 2; @media screen and (min-width: 1201px) { grid-area: 1 / 1 / 2 / 14; @@ -60,13 +63,11 @@ const GridContent = styled.main` @media screen and (min-width: 1201px) { grid-area: 2 / 2 / 2 / 11; - height: 100vh; overflow-y: auto; overflow-x: hidden; } @media screen and (min-width: 768px) and (max-width: 1200px) { grid-area: 2 / 2 / 2 / 13; - height: 100vh; overflow-y: auto; overflow-x: hidden; } @@ -101,6 +102,10 @@ const GridFooter = styled.div` const GridNav = styled.div` background-color: var(--spectrum-global-color-gray-75); + position: fixed; + margin-top: var(--spectrum-global-dimension-size-800); + height: 100%; + @media screen and (min-width: 768px) { grid-area: 2 / 1 / 4 / 2; }