diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx index ba3c8bfff7..a0c84bb56a 100644 --- a/packages/core-components/src/layout/Page/Page.tsx +++ b/packages/core-components/src/layout/Page/Page.tsx @@ -27,7 +27,7 @@ const useStyles = makeStyles(() => ({ "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'", gridTemplateRows: 'max-content auto 1fr', gridTemplateColumns: 'auto 1fr auto', - height: '100vh', + height: '100%', overflowY: 'auto', }, })); diff --git a/packages/core-components/src/layout/Sidebar/Page.tsx b/packages/core-components/src/layout/Sidebar/Page.tsx index 7c7a38d363..20faec2f30 100644 --- a/packages/core-components/src/layout/Sidebar/Page.tsx +++ b/packages/core-components/src/layout/Sidebar/Page.tsx @@ -31,7 +31,6 @@ const useStyles = makeStyles( theme => ({ root: { width: '100%', - minHeight: '100%', transition: 'padding-left 0.1s ease-out', [theme.breakpoints.up('sm')]: { paddingLeft: ({ isPinned }) => @@ -39,6 +38,9 @@ const useStyles = makeStyles( ? sidebarConfig.drawerWidthOpen : sidebarConfig.drawerWidthClosed, }, + [theme.breakpoints.down('xs')]: { + paddingBottom: sidebarConfig.mobileSidebarHeight, + }, }, }), { name: 'BackstageSidebarPage' },