Merge pull request #16697 from thefrontside/tm/remove-100vh-from-backstage-page

Use media queries to change layout instead of `isMobile` prop in `BackstagePage` component

.changeset/tiny-llamas-jump.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Use media queries to change layout instead of `isMobile` prop in `BackstagePage` component

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<BackstageTheme, { isMobile?: boolean }>(
-  () => ({
-    root: ({ isMobile }) => ({
+const useStyles = makeStyles<BackstageTheme>(
+  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: '100vh',
+      [theme.breakpoints.down('xs')]: {
+        height: '100%',
+      },
+    },
   }),
   { 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 (
     <ThemeProvider
       theme={(baseTheme: BackstageTheme) => ({