fix: scroll area

- scrollable element 100% viewport width - main content should have minimal 100% height of parent
centrifuge · Jul 28, 2023 · 0b9da6d · 0b9da6d
1 parent 1eb1bf8
commit 0b9da6d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 19 deletions.
diff --git a/centrifuge-app/src/components/LayoutBase/index.tsx b/centrifuge-app/src/components/LayoutBase/index.tsx
@@ -8,6 +8,7 @@ import { SidePanelProps } from '../SidePanel'
 import {
   FooterContainer,
   HeaderBackground,
+  Inner,
   LogoContainer,
   MainContainer,
   Root,
@@ -25,28 +26,29 @@ const PADDING_MAIN = [2, 2, 3, 5, 10]
 export function LayoutBase({ children, sidePanel }: LayoutBaseProps) {
   return (
     <Root>
-      <HeaderBackground />
+      <Inner>
+        <HeaderBackground />
 
-      <LogoContainer>
-        <LogoLink />
-      </LogoContainer>
+        <LogoContainer>
+          <LogoLink />
+        </LogoContainer>
 
-      <WalletContainer pr={PADDING_MAIN}>
-        <WalletMenu menuItems={[<OnboardingStatus />]} />
-      </WalletContainer>
+        <WalletContainer pr={PADDING_MAIN}>
+          <WalletMenu menuItems={[<OnboardingStatus />]} />
+        </WalletContainer>
 
-      <ToolbarContainer as="aside">
-        <Menu />
-      </ToolbarContainer>
+        <ToolbarContainer as="aside">
+          <Menu />
+        </ToolbarContainer>
 
-      <MainContainer as="main" px={PADDING_MAIN} pt={[2, 3, 7, 10]} pb={4}>
-        {children}
-      </MainContainer>
-
-      <FooterContainer>
-        <Footer />
-      </FooterContainer>
+        <MainContainer as="main" px={PADDING_MAIN} pt={[2, 3, 7, 10]} pb={4}>
+          {children}
+        </MainContainer>
 
+        <FooterContainer>
+          <Footer />
+        </FooterContainer>
+      </Inner>
       {sidePanel}
     </Root>
   )

diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx
@@ -12,10 +12,9 @@ const BREAK_POINT_COLUMNS = 'M'
 // breakpoint from minimal to extended left sidebar width
 const BREAK_POINT_SIDEBAR_EXTENDED = 'L'
 
-export const Root = styled(Grid)`
+export const Root = styled(Box)`
   position: relative;
   min-height: 100vh;
-  max-width: ${LAYOUT_MAX_WIDTH}px;
 
   @supports (min-height: 100dvh) {
     min-height: 100dvh;
@@ -29,6 +28,11 @@ export const Root = styled(Grid)`
       height: 100dvh;
     }
   }
+`
+
+export const Inner = styled(Grid)`
+  max-width: ${LAYOUT_MAX_WIDTH}px;
+  min-height: 100%;
 
   align-items: start;
   grid-template-rows: 0px ${HEADER_HEIGHT}px 1fr auto ${TOOLBAR_HEIGHT}px;