From f79ad0b788e693ab0b15ddd904e58ac149f7e670 Mon Sep 17 00:00:00 2001
From: Taras <tarasm@gmail.com>
Date: Fri, 3 Mar 2023 15:41:43 -0500
Subject: [PATCH] Use media breakpoint instead of isMobile

Signed-off-by: Taras <tarasm@gmail.com>
---
 .../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<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: '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 (
     <ThemeProvider
       theme={(baseTheme: BackstageTheme) => ({