Align to current screen size

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

plugins/shortcuts/src/AddShortcut.tsx

@@ -31,7 +31,7 @@ import { alertApiRef, useApi } from '@backstage/core-plugin-api';
 
 const useStyles = makeStyles(theme => ({
   card: {
-    width: 400,
+    maxWidth: 400,
   },
   header: {
     marginBottom: theme.spacing(1),

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

@@ -13,17 +13,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import { List } from '@material-ui/core';
 import { InfoCard } from '@backstage/core-components';
+import { BackstageTheme } from '@backstage/theme';
+import { List, useMediaQuery } from '@material-ui/core';
+import React from 'react';
 import { UserSettingsPinToggle } from './UserSettingsPinToggle';
 import { UserSettingsThemeToggle } from './UserSettingsThemeToggle';
 
-export const UserSettingsAppearanceCard = () => (
-  <InfoCard title="Appearance" variant="gridItem">
-    <List dense>
-      <UserSettingsThemeToggle />
-      {/* <UserSettingsPinToggle /> */}
-    </List>
-  </InfoCard>
-);
+export const UserSettingsAppearanceCard = () => {
+  const isMobileScreen = useMediaQuery<BackstageTheme>(theme =>
+    theme.breakpoints.down('xs'),
+  );
+
+  return (
+    <InfoCard title="Appearance" variant="gridItem">
+      <List dense>
+        <UserSettingsThemeToggle />
+        {!isMobileScreen && <UserSettingsPinToggle />}
+      </List>
+    </InfoCard>
+  );
+};

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

@@ -28,7 +28,7 @@ type Props = {
 
 export const SettingsPage = ({ providerSettings }: Props) => {
   const isMobileScreen = useMediaQuery<BackstageTheme>(theme =>
-    theme.breakpoints.up('xs'),
+    theme.breakpoints.down('xs'),
   );
 
   return (