feat: Make settings page responsive (#3228)

site/src/components/Section/Section.tsx

@@ -62,6 +62,11 @@ const useStyles = makeStyles((theme) => ({
     boxShadow: `0px 18px 12px 6px ${fade(theme.palette.common.black, 0.02)}`,
     marginBottom: theme.spacing(1),
     padding: theme.spacing(6),
+    borderRadius: theme.shape.borderRadius,
+
+    [theme.breakpoints.down("sm")]: {
+      padding: theme.spacing(4, 3, 4, 3),
+    },
   },
   inner: ({ layout }: { layout: SectionLayout }) => ({
     maxWidth: layout === "fluid" ? "100%" : 500,

site/src/components/TabPanel/TabPanel.tsx

@@ -37,6 +37,11 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     maxWidth: 1920,
     padding: theme.spacing(5, 3.5, 0, 4),
+
+    [theme.breakpoints.down("sm")]: {
+      flexDirection: "column",
+      padding: 0,
+    },
   },
 
   icon: {
@@ -51,12 +56,15 @@ const useStyles = makeStyles((theme) => ({
 
   menuPanel: {
     paddingRight: 40,
+
+    [theme.breakpoints.down("sm")]: {
+      padding: 0,
+    },
   },
 
   title: {
-    marginTop: theme.spacing(4),
+    marginTop: theme.spacing(6),
     fontSize: 32,
-    letterSpacing: -theme.spacing(0.0375),
   },
 
   contentPanel: {
@@ -84,15 +92,7 @@ const useStyles = makeStyles((theme) => ({
   },
   [theme.breakpoints.down("sm")]: {
     contentPanel: {
-      width: 700,
-    },
-  },
-  [theme.breakpoints.down("sm")]: {
-    contentPanel: {
-      width: 550,
-    },
-    root: {
-      marginRight: 0, //disabled scrollbar jump trick to avoid small screen bug with menu
+      width: "auto",
     },
   },
 }))

site/src/components/TabSidebar/TabSidebar.tsx

@@ -3,6 +3,7 @@ import ListItem from "@material-ui/core/ListItem"
 import { makeStyles } from "@material-ui/core/styles"
 import { FC } from "react"
 import { NavLink } from "react-router-dom"
+import { sidePadding } from "theme/constants"
 import { combineClasses } from "../../util/combineClasses"
 
 export interface TabSidebarItem {
@@ -47,10 +48,21 @@ const useStyles = makeStyles((theme) => ({
   menu: {
     minWidth: 160,
     marginTop: theme.spacing(5),
+
+    [theme.breakpoints.down("sm")]: {
+      display: "flex",
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      marginBottom: theme.spacing(2),
+      // Fit all the width
+      width: `calc(100% + ${sidePadding * 2}px)`,
+      marginLeft: -sidePadding,
+      marginTop: sidePadding,
+    },
   },
 
   link: {
     textDecoration: "none",
+    flex: 1,
   },
 
   menuItem: {
@@ -85,6 +97,13 @@ const useStyles = makeStyles((theme) => ({
         opacity: 1,
       },
     },
+
+    [theme.breakpoints.down("sm")]: {
+      textAlign: "center",
+      width: "100%",
+      paddingTop: theme.spacing(2),
+      paddingBottom: theme.spacing(2),
+    },
   },
 
   [theme.breakpoints.up("lg")]: {