From d937e32409db42d6dab3c1b5d7b0fc5d442edea5 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Thu, 27 Jan 2022 11:50:16 +0100 Subject: [PATCH 1/3] Differentiate between page height for mobile & desktop Signed-off-by: Philipp Hugenroth --- .../core-components/src/layout/Page/Page.tsx | 17 ++++++++++------- .../src/layout/Sidebar/MobileSidebar.tsx | 12 +++++++++++- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx index b013affee3..055fb25b40 100644 --- a/packages/core-components/src/layout/Page/Page.tsx +++ b/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( +const useStyles = makeStyles( () => ({ - 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) { +export function Page(props: Props) { const { themeId, children } = props; - const classes = useStyles(); + const { isMobile } = useContext(SidebarPinStateContext); + const classes = useStyles({ isMobile }); return ( ({ diff --git a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx index 95947f9274..6734d4b53a 100644 --- a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx +++ b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx @@ -93,6 +93,10 @@ const useStyles = makeStyles(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, + }} > {label} From f465b63b7f06ace665351d603d3eed2391197763 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Thu, 27 Jan 2022 12:01:55 +0100 Subject: [PATCH 2/3] Add changeset Signed-off-by: Philipp Hugenroth --- .changeset/gold-queens-clap.md | 5 +++++ packages/core-components/api-report.md | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/gold-queens-clap.md diff --git a/.changeset/gold-queens-clap.md b/.changeset/gold-queens-clap.md new file mode 100644 index 0000000000..252fbb1626 --- /dev/null +++ b/.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`. diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index d8aef17007..7819dcf3fc 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -738,7 +738,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): 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) // From 6efb1eb42db39d0271c4981227207880822b12df Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Fri, 28 Jan 2022 14:04:43 +0100 Subject: [PATCH 3/3] Make SidebarPinStateContext import more clear Signed-off-by: Philipp Hugenroth --- packages/core-components/src/layout/Page/Page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx index 055fb25b40..0b35a59d8f 100644 --- a/packages/core-components/src/layout/Page/Page.tsx +++ b/packages/core-components/src/layout/Page/Page.tsx @@ -17,7 +17,7 @@ import React, { useContext } from 'react'; import { BackstageTheme } from '@backstage/theme'; import { makeStyles, ThemeProvider } from '@material-ui/core/styles'; -import { SidebarPinStateContext } from '..'; +import { SidebarPinStateContext } from '../Sidebar/Page'; export type PageClassKey = 'root';