Add mobile

BrunoQuaresma · BrunoQuaresma · commit cea9dd8dd8fa · 2022-11-02T17:00:39.000Z
diff --git a/site/src/components/FormCloseButton/FormCloseButton.tsx b/site/src/components/FormCloseButton/FormCloseButton.tsx
@@ -47,6 +47,11 @@ const useStyles = makeStyles((theme) => ({
     "&:hover": {
       opacity: 1,
     },
+
+    [theme.breakpoints.down("md")]: {
+      top: theme.spacing(1),
+      right: theme.spacing(1),
+    },
   },
   label: {
     position: "absolute",
diff --git a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx b/site/src/components/FullPageForm/FullPageHorizontalForm.tsx
@@ -42,6 +42,11 @@ const useStyles = makeStyles((theme) => ({
   title: {
     paddingTop: theme.spacing(6),
     paddingBottom: theme.spacing(8),
+
+    [theme.breakpoints.down("md")]: {
+      paddingTop: theme.spacing(4),
+      paddingBottom: theme.spacing(4),
+    },
   },
 
   main: {
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -164,7 +164,7 @@ export const CreateWorkspacePageView: FC<
   return (
     <FullPageHorizontalForm title="New workspace" onCancel={props.onCancel}>
       <form onSubmit={form.handleSubmit}>
-        <Stack direction="column" spacing={10}>
+        <Stack direction="column" spacing={10} className={styles.formSections}>
           {/* General info */}
           <div className={styles.formSection}>
             <div className={styles.formSectionInfo}>
@@ -299,17 +299,33 @@ export const CreateWorkspacePageView: FC<
 }
 
 const useStyles = makeStyles((theme) => ({
+  formSections: {
+    [theme.breakpoints.down("md")]: {
+      gap: theme.spacing(8),
+    },
+  },
+
   formSection: {
     display: "flex",
     alignItems: "flex-start",
     gap: theme.spacing(15),
+
+    [theme.breakpoints.down("md")]: {
+      flexDirection: "column",
+      gap: theme.spacing(2),
+    },
   },
 
   formSectionInfo: {
     width: 312,
     flexShrink: 0,
     position: "sticky",
     top: theme.spacing(3),
+
+    [theme.breakpoints.down("md")]: {
+      width: "100%",
+      position: "initial",
+    },
   },
 
   formSectionInfoTitle: {
@@ -360,12 +376,21 @@ const useStyles = makeStyles((theme) => ({
 const useFormFooterStyles = makeStyles((theme) => ({
   button: {
     minWidth: theme.spacing(23),
+
+    [theme.breakpoints.down("md")]: {
+      width: "100%",
+    },
   },
   footer: {
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-start",
     flexDirection: "row-reverse",
     gap: theme.spacing(2),
+
+    [theme.breakpoints.down("md")]: {
+      flexDirection: "column",
+      gap: theme.spacing(1),
+    },
   },
 }))
