Add padding to SidebarPage to avoid MobileSidebar overlapping content

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

packages/core-components/src/layout/Page/Page.tsx

@@ -27,7 +27,7 @@ const useStyles = makeStyles<BackstageTheme>(() => ({
       "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'",
     gridTemplateRows: 'max-content auto 1fr',
     gridTemplateColumns: 'auto 1fr auto',
-    height: '100vh',
+    height: '100%',
     overflowY: 'auto',
   },
 }));

packages/core-components/src/layout/Sidebar/Page.tsx

@@ -31,7 +31,6 @@ const useStyles = makeStyles<BackstageTheme, { isPinned: boolean }>(
   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<BackstageTheme, { isPinned: boolean }>(
             ? sidebarConfig.drawerWidthOpen
             : sidebarConfig.drawerWidthClosed,
       },
+      [theme.breakpoints.down('xs')]: {
+        paddingBottom: sidebarConfig.mobileSidebarHeight,
+      },
     },
   }),
   { name: 'BackstageSidebarPage' },