Merge pull request #9200 from tudi2d/9093-fix-page-height

Differentiate between page height for mobile & desktop

.changeset/gold-queens-clap.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fix an issue where changes related to the `MobileSidebar` prevented scrolling pages. Additionally improve the menu of the `MobileSidebar` to not overlay the `BottomNavigation`.

packages/core-components/api-report.md

@@ -739,7 +739,7 @@ export type OverflowTooltipClassKey = 'container';
 // Warning: (ae-missing-release-tag) "Page" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function Page(props: PropsWithChildren<Props_16>): JSX.Element;
+export function Page(props: Props_16): JSX.Element;
 
 // Warning: (ae-missing-release-tag) "PageClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //

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 '../Sidebar/Page';
 
 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>