feat: make template pages responsive (#3232)

site/src/components/TableContainer/TableContainer.tsx

@@ -1,16 +0,0 @@
-import { makeStyles } from "@material-ui/core/styles"
-import { FC } from "react"
-
-export const TableContainer: FC = ({ children }) => {
-  const styles = useStyles()
-
-  return <div className={styles.wrapper}>{children}</div>
-}
-
-const useStyles = makeStyles((theme) => ({
-  wrapper: {
-    overflowX: "auto",
-    borderRadius: theme.shape.borderRadius,
-    border: `1px solid ${theme.palette.divider}`,
-  },
-}))

site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx

@@ -2,6 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import Table from "@material-ui/core/Table"
 import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
+import TableContainer from "@material-ui/core/TableContainer"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import { AvatarData } from "components/AvatarData/AvatarData"
@@ -26,7 +27,8 @@ export const TemplateResourcesTable: FC<TemplateResourcesProps> = ({ resources }
   const styles = useStyles()
 
   return (
-    <Table className={styles.table}>
+    <TableContainer className={styles.tableContainer}>
+      <Table>
         <TableHead>
           <TableHeaderRow>
             <TableCell>
@@ -90,6 +92,7 @@ export const TemplateResourcesTable: FC<TemplateResourcesProps> = ({ resources }
           })}
         </TableBody>
       </Table>
+    </TableContainer>
   )
 }
 
@@ -98,7 +101,7 @@ const useStyles = makeStyles((theme) => ({
     margin: 0,
   },
 
-  table: {
+  tableContainer: {
     border: 0,
   },
 

site/src/components/UsersTable/UsersTable.tsx

@@ -1,9 +1,9 @@
 import Table from "@material-ui/core/Table"
 import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
+import TableContainer from "@material-ui/core/TableContainer"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
-import { TableContainer } from "components/TableContainer/TableContainer"
 import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
 import { UsersTableBody } from "./UsersTableBody"

site/src/components/VersionsTable/VersionsTable.tsx

@@ -3,6 +3,7 @@ import { Theme } from "@material-ui/core/styles"
 import Table from "@material-ui/core/Table"
 import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
+import TableContainer from "@material-ui/core/TableContainer"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import useTheme from "@material-ui/styles/useTheme"
@@ -27,6 +28,7 @@ export const VersionsTable: FC<VersionsTableProps> = ({ versions }) => {
   const theme: Theme = useTheme()
 
   return (
+    <TableContainer>
       <Table data-testid="versions-table">
         <TableHead>
           <TableRow>
@@ -70,5 +72,6 @@ export const VersionsTable: FC<VersionsTableProps> = ({ versions }) => {
           )}
         </TableBody>
       </Table>
+    </TableContainer>
   )
 }

site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx

@@ -26,6 +26,14 @@ AllStates.args = {
   ],
 }
 
+export const SmallViewport = Template.bind({})
+SmallViewport.args = {
+  ...AllStates.args,
+}
+SmallViewport.parameters = {
+  chromatic: { viewports: [600] },
+}
+
 export const EmptyCanCreate = Template.bind({})
 EmptyCanCreate.args = {
   canCreateTemplate: true,

site/src/pages/TemplatesPage/TemplatesPageView.tsx

@@ -3,6 +3,7 @@ import { fade, makeStyles } from "@material-ui/core/styles"
 import Table from "@material-ui/core/Table"
 import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
+import TableContainer from "@material-ui/core/TableContainer"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
@@ -94,6 +95,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
         )}
       </PageHeader>
 
+      <TableContainer>
         <Table>
           <TableHead>
             <TableRow>
@@ -112,7 +114,9 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
                   <EmptyState
                     message={Language.emptyMessage}
                     description={
-                    props.canCreateTemplate ? Language.emptyDescription : Language.emptyViewNoPerms
+                      props.canCreateTemplate
+                        ? Language.emptyDescription
+                        : Language.emptyViewNoPerms
                     }
                     descriptionClassName={styles.emptyDescription}
                     cta={<CodeExample code="coder template init" />}
@@ -161,6 +165,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
             })}
           </TableBody>
         </Table>
+      </TableContainer>
     </Margins>
   )
 }

site/src/pages/UsersPage/UsersPageView.stories.tsx

@@ -17,6 +17,14 @@ Admin.args = {
   canEditUsers: true,
 }
 
+export const SmallViewport = Template.bind({})
+SmallViewport.args = {
+  ...Admin.args,
+}
+SmallViewport.parameters = {
+  chromatic: { viewports: [600] },
+}
+
 export const Member = Template.bind({})
 Member.args = { ...Admin.args, canCreateUser: false, canEditUsers: false }