From e587fe27259bb0aa1c8c3218fd227489e0e1df4e Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Tue, 26 Jul 2022 19:29:52 +0000
Subject: [PATCH 1/2] feat: Make settings page responsive

---
 site/src/components/Section/Section.tsx       |  5 +++++
 site/src/components/TabPanel/TabPanel.tsx     | 22 +++++++++----------
 site/src/components/TabSidebar/TabSidebar.tsx | 19 ++++++++++++++++
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/site/src/components/Section/Section.tsx b/site/src/components/Section/Section.tsx
index 9ea2bde7af7aa..9e2b993ed38d7 100644
--- a/site/src/components/Section/Section.tsx
+++ b/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,
diff --git a/site/src/components/TabPanel/TabPanel.tsx b/site/src/components/TabPanel/TabPanel.tsx
index 3b031517666f4..085d06cf7d65f 100644
--- a/site/src/components/TabPanel/TabPanel.tsx
+++ b/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",
     },
   },
 }))
diff --git a/site/src/components/TabSidebar/TabSidebar.tsx b/site/src/components/TabSidebar/TabSidebar.tsx
index c9282bb88dbf8..872759aa78604 100644
--- a/site/src/components/TabSidebar/TabSidebar.tsx
+++ b/site/src/components/TabSidebar/TabSidebar.tsx
@@ -47,10 +47,22 @@ 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),
+      // 48px is the side margins
+      width: "calc(100% + 48px)",
+      // Side margin
+      marginLeft: -theme.spacing(3),
+      marginTop: theme.spacing(3),
+    },
   },
 
   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")]: {

From a35085964be52a05bc3d1ed9ff1f8186358661be Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Tue, 26 Jul 2022 19:40:59 +0000
Subject: [PATCH 2/2] Use variables instead of hard values

---
 site/src/components/TabSidebar/TabSidebar.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/src/components/TabSidebar/TabSidebar.tsx b/site/src/components/TabSidebar/TabSidebar.tsx
index 872759aa78604..ab1981477a454 100644
--- a/site/src/components/TabSidebar/TabSidebar.tsx
+++ b/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 {
@@ -52,11 +53,10 @@ const useStyles = makeStyles((theme) => ({
       display: "flex",
       borderBottom: `1px solid ${theme.palette.divider}`,
       marginBottom: theme.spacing(2),
-      // 48px is the side margins
-      width: "calc(100% + 48px)",
-      // Side margin
-      marginLeft: -theme.spacing(3),
-      marginTop: theme.spacing(3),
+      // Fit all the width
+      width: `calc(100% + ${sidePadding * 2}px)`,
+      marginLeft: -sidePadding,
+      marginTop: sidePadding,
     },
   },