Refactored select behaviour to be better readable

- Remove header from Search & Settings on mobile

Co-authored-by: Tejas Kumar <tejas@tejas.qa>
Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

plugins/user-settings/src/components/General/UserSettingsGeneral.tsx

@@ -21,10 +21,10 @@ import { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard';
 export const UserSettingsGeneral = () => {
   return (
     <Grid container direction="row" spacing={3}>
-      <Grid item sm={12} md={6}>
+      <Grid item xs={12} md={6}>
         <UserSettingsProfileCard />
       </Grid>
-      <Grid item sm={12} md={6}>
+      <Grid item xs={12} md={6}>
         <UserSettingsAppearanceCard />
       </Grid>
     </Grid>

plugins/user-settings/src/components/SettingsPage.tsx

@@ -14,21 +14,26 @@
  * limitations under the License.
  */
 
+import { Header, Page, TabbedLayout } from '@backstage/core-components';
+import { BackstageTheme } from '@backstage/theme';
+import { useMediaQuery } from '@material-ui/core';
 import React from 'react';
 import { UserSettingsAuthProviders } from './AuthProviders';
 import { UserSettingsFeatureFlags } from './FeatureFlags';
 import { UserSettingsGeneral } from './General';
-import { Header, Page, TabbedLayout } from '@backstage/core-components';
 
 type Props = {
   providerSettings?: JSX.Element;
 };
 
 export const SettingsPage = ({ providerSettings }: Props) => {
+  const isMobileScreen = useMediaQuery<BackstageTheme>(theme =>
+    theme.breakpoints.up('xs'),
+  );
+
   return (
     <Page themeId="home">
-      <Header title="Settings" />
-
+      {!isMobileScreen && <Header title="Settings" />}
       <TabbedLayout>
         <TabbedLayout.Route path="general" title="General">
           <UserSettingsGeneral />