Differentiate between page height for mobile & desktop

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

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

@@ -14,34 +14,37 @@
  * limitations under the License.
  */
 
-import React, { PropsWithChildren } from 'react';
+import React, { useContext } from 'react';
 import { BackstageTheme } from '@backstage/theme';
 import { makeStyles, ThemeProvider } from '@material-ui/core/styles';
+import { SidebarPinStateContext } from '..';
 
 export type PageClassKey = 'root';
 
-const useStyles = makeStyles<BackstageTheme>(
+const useStyles = makeStyles<BackstageTheme, { isMobile?: boolean }>(
   () => ({
-    root: {
+    root: ({ isMobile }) => ({
       display: 'grid',
       gridTemplateAreas:
         "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'",
       gridTemplateRows: 'max-content auto 1fr',
       gridTemplateColumns: 'auto 1fr auto',
-      height: '100%',
+      height: isMobile ? '100%' : '100vh',
       overflowY: 'auto',
-    },
+    }),
   }),
   { name: 'BackstagePage' },
 );
 
 type Props = {
   themeId: string;
+  children?: React.ReactNode;
 };
 
-export function Page(props: PropsWithChildren<Props>) {
+export function Page(props: Props) {
   const { themeId, children } = props;
-  const classes = useStyles();
+  const { isMobile } = useContext(SidebarPinStateContext);
+  const classes = useStyles({ isMobile });
   return (
     <ThemeProvider
       theme={(baseTheme: BackstageTheme) => ({

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

@@ -93,6 +93,10 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   overlayHeaderClose: {
     color: theme.palette.bursts.fontColor,
   },
+
+  marginMobileSidebar: {
+    marginBottom: `${sidebarConfig.mobileSidebarHeight}px`,
+  },
 }));
 
 const sortSidebarGroupsForPriority = (children: React.ReactElement[]) =>
@@ -117,7 +121,13 @@ const OverlayMenu = ({
       anchor="bottom"
       open={open}
       onClose={onClose}
-      classes={{ paperAnchorBottom: classes.overlay }}
+      ModalProps={{
+        BackdropProps: { classes: { root: classes.marginMobileSidebar } },
+      }}
+      classes={{
+        root: classes.marginMobileSidebar,
+        paperAnchorBottom: classes.overlay,
+      }}
     >
       <Box className={classes.overlayHeader}>
         <Typography variant="h3">{label}</Typography>