make user settings page responsive (#3084)

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

@@ -14,24 +14,28 @@
  * limitations under the License.
  */
 import { InfoCard } from '@backstage/core';
-import { Grid, List } from '@material-ui/core';
+import { Grid, List, useMediaQuery, useTheme } from '@material-ui/core';
 import React from 'react';
 import { PinButton } from './PinButton';
 import { Profile } from './Profile';
 import { ThemeToggle } from './ThemeToggle';
 
-export const General = () => (
-  <Grid container direction="row" spacing={3}>
-    <Grid item sm={12} md={6}>
-      <Profile />
+export const General = () => {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  return (
+    <Grid container direction="row" spacing={3}>
+      <Grid item sm={12} md={6}>
+        <Profile />
+      </Grid>
+      <Grid item sm={12} md={6}>
+        <InfoCard title="Appearance">
+          <List dense>
+            <ThemeToggle />
+            {!fullScreen && <PinButton />}
+          </List>
+        </InfoCard>
+      </Grid>
     </Grid>
-    <Grid item sm={12} md={6}>
-      <InfoCard title="Appearance">
-        <List dense>
-          <ThemeToggle />
-          <PinButton />
-        </List>
-      </InfoCard>
-    </Grid>
-  </Grid>
-);
+  );
+};

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

@@ -25,6 +25,7 @@ import {
   ListItemText,
   ListItemSecondaryAction,
   Tooltip,
+  makeStyles,
 } from '@material-ui/core';
 
 type ThemeIconProps = {
@@ -48,6 +49,29 @@ type TooltipToggleButtonProps = {
   value: string;
 };
 
+const useStyles = makeStyles(theme => ({
+  list: {
+    [theme.breakpoints.down('xs')]: {
+      padding: `0 0 12px`,
+    },
+  },
+  listItemText: {
+    [theme.breakpoints.down('xs')]: {
+      paddingRight: 0,
+      paddingLeft: 0,
+    },
+  },
+  listItemSecondaryAction: {
+    [theme.breakpoints.down('xs')]: {
+      width: '100%',
+      top: 'auto',
+      right: 'auto',
+      position: 'relative',
+      transform: 'unset',
+    },
+  },
+}));
+
 // ToggleButtonGroup uses React.children.map instead of context
 // so wrapping with Tooltip breaks ToggleButton functionality.
 const TooltipToggleButton = ({
@@ -64,6 +88,7 @@ const TooltipToggleButton = ({
 );
 
 export const ThemeToggle = () => {
+  const classes = useStyles();
   const appThemeApi = useApi(appThemeApiRef);
   const themeId = useObservable(
     appThemeApi.activeThemeId$(),
@@ -84,9 +109,13 @@ export const ThemeToggle = () => {
   };
 
   return (
-    <ListItem>
-      <ListItemText primary="Theme" secondary="Change the theme mode" />
-      <ListItemSecondaryAction>
+    <ListItem className={classes.list}>
+      <ListItemText
+        className={classes.listItemText}
+        primary="Theme"
+        secondary="Change the theme mode"
+      />
+      <ListItemSecondaryAction className={classes.listItemSecondaryAction}>
         <ToggleButtonGroup
           exclusive
           size="small"
@@ -95,7 +124,6 @@ export const ThemeToggle = () => {
         >
           {themeIds.map(theme => {
             const themeIcon = themeIds.find(t => t.id === theme.id)?.icon;
-
             return (
               <TooltipToggleButton
                 key={theme.id}