Move 'isMobile' in Context

Optimize generated docs by labeling components with scope

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

packages/app/src/components/search/SearchPage.tsx

@@ -14,7 +14,13 @@
  * limitations under the License.
  */
 
-import { Content, Header, Lifecycle, Page } from '@backstage/core-components';
+import {
+  Content,
+  Header,
+  Lifecycle,
+  Page,
+  SidebarStateContext,
+} from '@backstage/core-components';
 import { CatalogResultListItem } from '@backstage/plugin-catalog';
 import {
   DefaultResultListItem,
@@ -25,16 +31,8 @@ import {
   SearchType,
 } from '@backstage/plugin-search';
 import { DocsResultListItem } from '@backstage/plugin-techdocs';
-import {
-  Grid,
-  List,
-  makeStyles,
-  Paper,
-  Theme,
-  useMediaQuery,
-} from '@material-ui/core';
-import React from 'react';
-import { BackstageTheme } from '@backstage/theme';
+import { Grid, List, makeStyles, Paper, Theme } from '@material-ui/core';
+import React, { useContext } from 'react';
 
 const useStyles = makeStyles((theme: Theme) => ({
   bar: {
@@ -52,15 +50,11 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const SearchPage = () => {
   const classes = useStyles();
-  const isMobileScreen = useMediaQuery<BackstageTheme>(theme =>
-    theme.breakpoints.down('xs'),
-  );
+  const { isMobile } = useContext(SidebarStateContext);
 
   return (
     <Page themeId="home">
-      {!isMobileScreen && (
-        <Header title="Search" subtitle={<Lifecycle alpha />} />
-      )}
+      {!isMobile && <Header title="Search" subtitle={<Lifecycle alpha />} />}
       <Content>
         <Grid container direction="row">
           <Grid item xs={12}>
@@ -68,7 +62,7 @@ const SearchPage = () => {
               <SearchBar debounceTime={100} />
             </Paper>
           </Grid>
-          {!isMobileScreen && (
+          {!isMobile && (
             <Grid item xs={3}>
               <Paper className={classes.filters}>
                 <SearchType