From f79ad0b788e693ab0b15ddd904e58ac149f7e670 Mon Sep 17 00:00:00 2001 From: Taras Date: Fri, 3 Mar 2023 15:41:43 -0500 Subject: [PATCH 1/4] Use media breakpoint instead of isMobile Signed-off-by: Taras --- .../core-components/src/layout/Page/Page.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx index 1abb8da93b..a1939d1b0d 100644 --- a/packages/core-components/src/layout/Page/Page.tsx +++ b/packages/core-components/src/layout/Page/Page.tsx @@ -17,21 +17,23 @@ import React from 'react'; import { BackstageTheme } from '@backstage/theme'; import { makeStyles, ThemeProvider } from '@material-ui/core/styles'; -import { useSidebarPinState } from '../Sidebar/SidebarPinStateContext'; export type PageClassKey = 'root'; -const useStyles = makeStyles( - () => ({ - root: ({ isMobile }) => ({ +const useStyles = makeStyles( + theme => ({ + root: { display: 'grid', gridTemplateAreas: "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'", gridTemplateRows: 'max-content auto 1fr', gridTemplateColumns: 'auto 1fr auto', - height: isMobile ? '100%' : '100vh', overflowY: 'auto', - }), + height: '100%', + [theme.breakpoints.up('md')]: { + height: '100vh', + }, + }, }), { name: 'BackstagePage' }, ); @@ -43,8 +45,7 @@ type Props = { export function Page(props: Props) { const { themeId, children } = props; - const { isMobile } = useSidebarPinState(); - const classes = useStyles({ isMobile }); + const classes = useStyles(); return ( ({ From fa004f668713c5a3b8162a4253110343c9d5d1e8 Mon Sep 17 00:00:00 2001 From: Taras Date: Fri, 3 Mar 2023 15:50:33 -0500 Subject: [PATCH 2/4] Added changeset Signed-off-by: Taras --- .changeset/tiny-llamas-jump.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tiny-llamas-jump.md diff --git a/.changeset/tiny-llamas-jump.md b/.changeset/tiny-llamas-jump.md new file mode 100644 index 0000000000..bf5bc363b3 --- /dev/null +++ b/.changeset/tiny-llamas-jump.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Use css media query in BackstagePage style hook to eliminate style hook props From 7d98b1c185f9c1ece5cfd67803a8191a2cb56b39 Mon Sep 17 00:00:00 2001 From: Taras Date: Fri, 3 Mar 2023 15:58:19 -0500 Subject: [PATCH 3/4] Show Mobile only for smaller than xs Signed-off-by: Taras --- packages/core-components/src/layout/Page/Page.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx index a1939d1b0d..00988c475b 100644 --- a/packages/core-components/src/layout/Page/Page.tsx +++ b/packages/core-components/src/layout/Page/Page.tsx @@ -29,9 +29,9 @@ const useStyles = makeStyles( gridTemplateRows: 'max-content auto 1fr', gridTemplateColumns: 'auto 1fr auto', overflowY: 'auto', - height: '100%', - [theme.breakpoints.up('md')]: { - height: '100vh', + height: '100vh', + [theme.breakpoints.down('xs')]: { + height: '100%', }, }, }), From f1a128ac9337873a67ace6d397d4b1b1d0b0ebf3 Mon Sep 17 00:00:00 2001 From: Taras Mankovski Date: Mon, 6 Mar 2023 08:14:31 -0500 Subject: [PATCH 4/4] Update .changeset/tiny-llamas-jump.md Co-authored-by: Ben Lambert Signed-off-by: Taras Mankovski --- .changeset/tiny-llamas-jump.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/tiny-llamas-jump.md b/.changeset/tiny-llamas-jump.md index bf5bc363b3..ccf42cd514 100644 --- a/.changeset/tiny-llamas-jump.md +++ b/.changeset/tiny-llamas-jump.md @@ -2,4 +2,4 @@ '@backstage/core-components': patch --- -Use css media query in BackstagePage style hook to eliminate style hook props +Use media queries to change layout instead of `isMobile` prop in `BackstagePage` component