From c5d16d598fa2e7c195a9cbfd1c4e99fcc3581a94 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Mon, 25 Jul 2022 19:28:49 +0000
Subject: [PATCH 1/6] fix: Fix responsive for workspaces and workspace page

---
 .../components/BuildsTable/BuildsTable.tsx    | 131 +++++++------
 site/src/components/PageHeader/PageHeader.tsx |  11 ++
 site/src/components/Resources/Resources.tsx   | 183 +++++++++---------
 site/src/components/Stack/Stack.tsx           |   4 +
 site/src/components/Table/Table.test.tsx      |  81 --------
 site/src/components/Table/Table.tsx           | 115 -----------
 .../TableContainer/TableContainer.tsx         |  16 ++
 site/src/components/TableTitle/TableTitle.tsx |  65 -------
 site/src/components/Workspace/Workspace.tsx   |  18 +-
 .../WorkspaceActions/WorkspaceActions.tsx     |  15 +-
 .../WorkspaceScheduleButton.tsx               |  11 +-
 .../WorkspacesTable/WorkspacesTable.tsx       |  37 ++--
 site/src/theme/overrides.ts                   |  24 ++-
 site/src/theme/theme.ts                       |   8 +-
 14 files changed, 269 insertions(+), 450 deletions(-)
 delete mode 100644 site/src/components/Table/Table.test.tsx
 delete mode 100644 site/src/components/Table/Table.tsx
 create mode 100644 site/src/components/TableContainer/TableContainer.tsx
 delete mode 100644 site/src/components/TableTitle/TableTitle.tsx

diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx
index 92229a1a3be16..c8f38d79ba070 100644
--- a/site/src/components/BuildsTable/BuildsTable.tsx
+++ b/site/src/components/BuildsTable/BuildsTable.tsx
@@ -3,6 +3,7 @@ import { fade, makeStyles, 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 KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
@@ -37,72 +38,74 @@ export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
   const styles = useStyles()
 
   return (
-    <Table className={className} data-testid="builds-table">
-      <TableHead>
-        <TableRow>
-          <TableCell width="20%">{Language.actionLabel}</TableCell>
-          <TableCell width="20%">{Language.durationLabel}</TableCell>
-          <TableCell width="40%">{Language.startedAtLabel}</TableCell>
-          <TableCell width="20%">{Language.statusLabel}</TableCell>
-          <TableCell></TableCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {isLoading && <TableLoader />}
-        {builds &&
-          builds.map((build) => {
-            const status = getDisplayWorkspaceBuildStatus(theme, build)
-            const buildPageLink = `/@${username}/${workspaceName}/builds/${build.build_number}`
-
-            return (
-              <TableRow
-                hover
-                key={build.id}
-                data-testid={`build-${build.id}`}
-                tabIndex={0}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter") {
-                    navigate(buildPageLink)
-                  }
-                }}
-                className={styles.clickableTableRow}
-              >
-                <TableCellLink to={buildPageLink}>{build.transition}</TableCellLink>
-                <TableCellLink to={buildPageLink}>
-                  <span style={{ color: theme.palette.text.secondary }}>
-                    {displayWorkspaceBuildDuration(build)}
-                  </span>
-                </TableCellLink>
-                <TableCellLink to={buildPageLink}>
-                  <span style={{ color: theme.palette.text.secondary }}>
-                    {new Date(build.created_at).toLocaleString()}
-                  </span>
-                </TableCellLink>
-                <TableCellLink to={buildPageLink}>
-                  <span style={{ color: status.color }} className={styles.status}>
-                    {status.status}
-                  </span>
-                </TableCellLink>
-                <TableCellLink to={buildPageLink}>
-                  <div className={styles.arrowCell}>
-                    <KeyboardArrowRight className={styles.arrowRight} />
-                  </div>
-                </TableCellLink>
-              </TableRow>
-            )
-          })}
-
-        {builds && builds.length === 0 && (
+    <TableContainer className={className}>
+      <Table data-testid="builds-table">
+        <TableHead>
           <TableRow>
-            <TableCell colSpan={999}>
-              <Box p={4}>
-                <EmptyState message={Language.emptyMessage} />
-              </Box>
-            </TableCell>
+            <TableCell width="20%">{Language.actionLabel}</TableCell>
+            <TableCell width="20%">{Language.durationLabel}</TableCell>
+            <TableCell width="40%">{Language.startedAtLabel}</TableCell>
+            <TableCell width="20%">{Language.statusLabel}</TableCell>
+            <TableCell></TableCell>
           </TableRow>
-        )}
-      </TableBody>
-    </Table>
+        </TableHead>
+        <TableBody>
+          {isLoading && <TableLoader />}
+          {builds &&
+            builds.map((build) => {
+              const status = getDisplayWorkspaceBuildStatus(theme, build)
+              const buildPageLink = `/@${username}/${workspaceName}/builds/${build.build_number}`
+
+              return (
+                <TableRow
+                  hover
+                  key={build.id}
+                  data-testid={`build-${build.id}`}
+                  tabIndex={0}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter") {
+                      navigate(buildPageLink)
+                    }
+                  }}
+                  className={styles.clickableTableRow}
+                >
+                  <TableCellLink to={buildPageLink}>{build.transition}</TableCellLink>
+                  <TableCellLink to={buildPageLink}>
+                    <span style={{ color: theme.palette.text.secondary }}>
+                      {displayWorkspaceBuildDuration(build)}
+                    </span>
+                  </TableCellLink>
+                  <TableCellLink to={buildPageLink}>
+                    <span style={{ color: theme.palette.text.secondary }}>
+                      {new Date(build.created_at).toLocaleString()}
+                    </span>
+                  </TableCellLink>
+                  <TableCellLink to={buildPageLink}>
+                    <span style={{ color: status.color }} className={styles.status}>
+                      {status.status}
+                    </span>
+                  </TableCellLink>
+                  <TableCellLink to={buildPageLink}>
+                    <div className={styles.arrowCell}>
+                      <KeyboardArrowRight className={styles.arrowRight} />
+                    </div>
+                  </TableCellLink>
+                </TableRow>
+              )
+            })}
+
+          {builds && builds.length === 0 && (
+            <TableRow>
+              <TableCell colSpan={999}>
+                <Box p={4}>
+                  <EmptyState message={Language.emptyMessage} />
+                </Box>
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </TableContainer>
   )
 }
 
diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
index 752ab55e40f34..d0c756541df2c 100644
--- a/site/src/components/PageHeader/PageHeader.tsx
+++ b/site/src/components/PageHeader/PageHeader.tsx
@@ -38,6 +38,11 @@ const useStyles = makeStyles((theme) => ({
     alignItems: "center",
     paddingTop: theme.spacing(6),
     paddingBottom: theme.spacing(5),
+
+    [theme.breakpoints.down("md")]: {
+      flexDirection: "column",
+      alignItems: "flex-start",
+    },
   },
 
   title: {
@@ -60,5 +65,11 @@ const useStyles = makeStyles((theme) => ({
 
   actions: {
     marginLeft: "auto",
+
+    [theme.breakpoints.down("md")]: {
+      marginTop: theme.spacing(3),
+      marginLeft: "initial",
+      width: "100%",
+    },
   },
 }))
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
index bb3ba6cf3c6db..debbf2bfe45d7 100644
--- a/site/src/components/Resources/Resources.tsx
+++ b/site/src/components/Resources/Resources.tsx
@@ -2,6 +2,7 @@ import { makeStyles, 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"
@@ -46,101 +47,103 @@ export const Resources: FC<ResourcesProps> = ({
       {getResourcesError ? (
         { getResourcesError }
       ) : (
-        <Table className={styles.table}>
-          <TableHead>
-            <TableHeaderRow>
-              <TableCell>
-                <Stack direction="row" spacing={0.5} alignItems="center">
-                  {Language.resourceLabel}
-                  <ResourcesHelpTooltip />
-                </Stack>
-              </TableCell>
-              <TableCell className={styles.agentColumn}>
-                <Stack direction="row" spacing={0.5} alignItems="center">
-                  {Language.agentLabel}
-                  <AgentHelpTooltip />
-                </Stack>
-              </TableCell>
-              {canUpdateWorkspace && <TableCell></TableCell>}
-            </TableHeaderRow>
-          </TableHead>
-          <TableBody>
-            {resources?.map((resource) => {
-              {
-                /* We need to initialize the agents to display the resource */
-              }
-              const agents = resource.agents ?? [null]
-              const resourceName = (
-                <AvatarData
-                  avatar={<ResourceAvatar type={resource.type} />}
-                  title={resource.name}
-                  subtitle={resource.type}
-                  highlightTitle
-                />
-              )
-
-              return agents.map((agent, agentIndex) => {
+        <TableContainer className={styles.tableContainer}>
+          <Table>
+            <TableHead>
+              <TableHeaderRow>
+                <TableCell>
+                  <Stack direction="row" spacing={0.5} alignItems="center">
+                    {Language.resourceLabel}
+                    <ResourcesHelpTooltip />
+                  </Stack>
+                </TableCell>
+                <TableCell className={styles.agentColumn}>
+                  <Stack direction="row" spacing={0.5} alignItems="center">
+                    {Language.agentLabel}
+                    <AgentHelpTooltip />
+                  </Stack>
+                </TableCell>
+                {canUpdateWorkspace && <TableCell></TableCell>}
+              </TableHeaderRow>
+            </TableHead>
+            <TableBody>
+              {resources?.map((resource) => {
                 {
-                  /* If there is no agent, just display the resource name */
-                }
-                if (!agent) {
-                  return (
-                    <TableRow key={`${resource.id}-${agentIndex}`}>
-                      <TableCell>{resourceName}</TableCell>
-                      <TableCell colSpan={3}></TableCell>
-                    </TableRow>
-                  )
+                  /* We need to initialize the agents to display the resource */
                 }
+                const agents = resource.agents ?? [null]
+                const resourceName = (
+                  <AvatarData
+                    avatar={<ResourceAvatar type={resource.type} />}
+                    title={resource.name}
+                    subtitle={resource.type}
+                    highlightTitle
+                  />
+                )
 
-                const agentStatus = getDisplayAgentStatus(theme, agent)
-                return (
-                  <TableRow key={`${resource.id}-${agent.id}`}>
-                    {/* We only want to display the name in the first row because we are using rowSpan */}
-                    {/* The rowspan should be the same than the number of agents */}
-                    {agentIndex === 0 && (
-                      <TableCell className={styles.resourceNameCell} rowSpan={agents.length}>
-                        {resourceName}
+                return agents.map((agent, agentIndex) => {
+                  {
+                    /* If there is no agent, just display the resource name */
+                  }
+                  if (!agent) {
+                    return (
+                      <TableRow key={`${resource.id}-${agentIndex}`}>
+                        <TableCell>{resourceName}</TableCell>
+                        <TableCell colSpan={3}></TableCell>
+                      </TableRow>
+                    )
+                  }
+
+                  const agentStatus = getDisplayAgentStatus(theme, agent)
+                  return (
+                    <TableRow key={`${resource.id}-${agent.id}`}>
+                      {/* We only want to display the name in the first row because we are using rowSpan */}
+                      {/* The rowspan should be the same than the number of agents */}
+                      {agentIndex === 0 && (
+                        <TableCell className={styles.resourceNameCell} rowSpan={agents.length}>
+                          {resourceName}
+                        </TableCell>
+                      )}
+
+                      <TableCell className={styles.agentColumn}>
+                        {agent.name}
+                        <div className={styles.agentInfo}>
+                          <span className={styles.operatingSystem}>{agent.operating_system}</span>
+                          <span style={{ color: agentStatus.color }} className={styles.status}>
+                            {agentStatus.status}
+                          </span>
+                        </div>
                       </TableCell>
-                    )}
-
-                    <TableCell className={styles.agentColumn}>
-                      {agent.name}
-                      <div className={styles.agentInfo}>
-                        <span className={styles.operatingSystem}>{agent.operating_system}</span>
-                        <span style={{ color: agentStatus.color }} className={styles.status}>
-                          {agentStatus.status}
-                        </span>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <>
-                        {canUpdateWorkspace && agent.status === "connected" && (
-                          <div className={styles.accessLinks}>
-                            <SSHButton workspaceName={workspace.name} agentName={agent.name} />
-                            <TerminalLink
-                              workspaceName={workspace.name}
-                              agentName={agent.name}
-                              userName={workspace.owner_name}
-                            />
-                            {agent.apps.map((app) => (
-                              <AppLink
-                                key={app.name}
-                                appIcon={app.icon}
-                                appName={app.name}
-                                userName={workspace.owner_name}
+                      <TableCell>
+                        <>
+                          {canUpdateWorkspace && agent.status === "connected" && (
+                            <div className={styles.accessLinks}>
+                              <SSHButton workspaceName={workspace.name} agentName={agent.name} />
+                              <TerminalLink
                                 workspaceName={workspace.name}
+                                agentName={agent.name}
+                                userName={workspace.owner_name}
                               />
-                            ))}
-                          </div>
-                        )}
-                      </>
-                    </TableCell>
-                  </TableRow>
-                )
-              })
-            })}
-          </TableBody>
-        </Table>
+                              {agent.apps.map((app) => (
+                                <AppLink
+                                  key={app.name}
+                                  appIcon={app.icon}
+                                  appName={app.name}
+                                  userName={workspace.owner_name}
+                                  workspaceName={workspace.name}
+                                />
+                              ))}
+                            </div>
+                          )}
+                        </>
+                      </TableCell>
+                    </TableRow>
+                  )
+                })
+              })}
+            </TableBody>
+          </Table>
+        </TableContainer>
       )}
     </div>
   )
@@ -152,7 +155,7 @@ const useStyles = makeStyles((theme) => ({
     border: `1px solid ${theme.palette.divider}`,
   },
 
-  table: {
+  tableContainer: {
     border: 0,
   },
 
diff --git a/site/src/components/Stack/Stack.tsx b/site/src/components/Stack/Stack.tsx
index 5d2c859f9125a..262a8d02bd76e 100644
--- a/site/src/components/Stack/Stack.tsx
+++ b/site/src/components/Stack/Stack.tsx
@@ -17,6 +17,10 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: ({ direction }: StyleProps) => direction,
     gap: ({ spacing }: StyleProps) => theme.spacing(spacing),
     alignItems: ({ alignItems }: StyleProps) => alignItems,
+
+    [theme.breakpoints.down("md")]: {
+      width: "100%",
+    },
   },
 }))
 
diff --git a/site/src/components/Table/Table.test.tsx b/site/src/components/Table/Table.test.tsx
deleted file mode 100644
index eb9f20e29dc28..0000000000000
--- a/site/src/components/Table/Table.test.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { screen } from "@testing-library/react"
-import { render } from "../../testHelpers/renderHelpers"
-import { Column, Table } from "./Table"
-
-interface TestData {
-  name: string
-  description: string
-}
-
-const columns: Column<TestData>[] = [
-  {
-    name: "Name",
-    key: "name",
-  },
-  {
-    name: "Description",
-    key: "description",
-    // For description, we'll test out the custom renderer path
-    renderer: (field) => <span>{"!!" + field + "!!"}</span>,
-  },
-]
-
-const data: TestData[] = [{ name: "AName", description: "ADescription" }]
-const emptyData: TestData[] = []
-
-describe("Table", () => {
-  it("renders empty state if empty", async () => {
-    // Given
-    const emptyState = <div>Empty Table!</div>
-    const tableProps = {
-      title: "TitleTest",
-      data: emptyData,
-      columns,
-      emptyState,
-    }
-
-    // When
-    render(<Table {...tableProps} />)
-
-    // Then
-    // Since there are no items, our empty state should've rendered
-    const emptyTextElement = await screen.findByText("Empty Table!")
-    expect(emptyTextElement).toBeDefined()
-  })
-
-  it("renders title", async () => {
-    // Given
-    const tableProps = {
-      title: "TitleTest",
-      data: emptyData,
-      columns,
-    }
-
-    // When
-    render(<Table {...tableProps} />)
-
-    // Then
-    const titleElement = await screen.findByText("TitleTest")
-    expect(titleElement).toBeDefined()
-  })
-
-  it("renders data fields with default renderer if none provided", async () => {
-    // Given
-    const tableProps = {
-      title: "TitleTest",
-      data,
-      columns,
-    }
-
-    // When
-    render(<Table {...tableProps} />)
-
-    // Then
-    // Check that the 'name' was rendered, with the default renderer
-    const nameElement = await screen.findByText("AName")
-    expect(nameElement).toBeDefined()
-    // ...and the description used our custom rendered
-    const descriptionElement = await screen.findByText("!!ADescription!!")
-    expect(descriptionElement).toBeDefined()
-  })
-})
diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx
deleted file mode 100644
index 5b2c2b83d8ab5..0000000000000
--- a/site/src/components/Table/Table.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import Box from "@material-ui/core/Box"
-import MuiTable from "@material-ui/core/Table"
-import TableBody from "@material-ui/core/TableBody"
-import TableCell from "@material-ui/core/TableCell"
-import TableHead from "@material-ui/core/TableHead"
-import TableRow from "@material-ui/core/TableRow"
-import { ReactElement } from "react"
-import { TableHeaders } from "../TableHeaders/TableHeaders"
-import { TableTitle } from "../TableTitle/TableTitle"
-
-export type Column<T> = {
-  [K in keyof T]: {
-    /**
-     * The field of type T that this column is associated with
-     */
-    key: K
-    /**
-     * Friendly name of the field, shown in headers
-     */
-    name: string
-    /**
-     * Custom render for the field inside the table
-     */
-    renderer?: (field: T[K], data: T) => ReactElement
-  }
-}[keyof T]
-
-export interface TableProps<T> {
-  /**
-   * Title of the table
-   */
-  title?: string
-  /**
-   * A list of columns, including the name and the key
-   */
-  columns: Column<T>[]
-  /**
-   * The actual data to show in the table
-   */
-  data: T[]
-  /**
-   * Optional empty state UI when the data is empty
-   */
-  emptyState?: ReactElement
-  /**
-   * Optional element to render row actions like delete, update, etc
-   */
-  rowMenu?: (data: T) => ReactElement
-}
-
-export const Table = <T,>({
-  columns,
-  data,
-  emptyState,
-  title,
-  rowMenu,
-}: TableProps<T>): ReactElement => {
-  const columnNames = columns.map(({ name }) => name)
-  const body = renderTableBody(data, columns, emptyState, rowMenu)
-
-  return (
-    <MuiTable>
-      <TableHead>
-        {title && <TableTitle title={title} />}
-        <TableHeaders columns={columnNames} hasMenu={!!rowMenu} />
-      </TableHead>
-      {body}
-    </MuiTable>
-  )
-}
-
-/**
- * Helper function to render the table data, falling back to an empty state if available
- */
-const renderTableBody = <T,>(
-  data: T[],
-  columns: Column<T>[],
-  emptyState?: ReactElement,
-  rowMenu?: (data: T) => ReactElement,
-) => {
-  if (data.length > 0) {
-    const rows = data.map((item: T, index) => {
-      const cells = columns.map((column) => {
-        if (column.renderer) {
-          return (
-            <TableCell key={String(column.key)}>
-              {column.renderer(item[column.key], item)}
-            </TableCell>
-          )
-        } else {
-          return (
-            <TableCell key={String(column.key)}>{String(item[column.key]).toString()}</TableCell>
-          )
-        }
-      })
-      return (
-        <TableRow key={index}>
-          {cells}
-          {rowMenu && <TableCell>{rowMenu(item)}</TableCell>}
-        </TableRow>
-      )
-    })
-    return <TableBody>{rows}</TableBody>
-  } else {
-    return (
-      <TableBody>
-        <TableRow>
-          <TableCell colSpan={999}>
-            <Box p={4}>{emptyState}</Box>
-          </TableCell>
-        </TableRow>
-      </TableBody>
-    )
-  }
-}
diff --git a/site/src/components/TableContainer/TableContainer.tsx b/site/src/components/TableContainer/TableContainer.tsx
new file mode 100644
index 0000000000000..989b26490b60a
--- /dev/null
+++ b/site/src/components/TableContainer/TableContainer.tsx
@@ -0,0 +1,16 @@
+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}`,
+  },
+}))
diff --git a/site/src/components/TableTitle/TableTitle.tsx b/site/src/components/TableTitle/TableTitle.tsx
deleted file mode 100644
index d098919b9c07f..0000000000000
--- a/site/src/components/TableTitle/TableTitle.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import Box from "@material-ui/core/Box"
-import { makeStyles } from "@material-ui/core/styles"
-import TableCell from "@material-ui/core/TableCell"
-import TableRow from "@material-ui/core/TableRow"
-import Typography from "@material-ui/core/Typography"
-import * as React from "react"
-
-export interface TableTitleProps {
-  /** A title to display */
-  readonly title?: React.ReactNode
-  /** Arbitrary node to display to the right of the title. */
-  readonly details?: React.ReactNode
-}
-
-/**
- * Component that encapsulates all of the pieces that sit on the top of a table.
- */
-export const TableTitle: React.FC<TableTitleProps> = ({ title, details }) => {
-  const styles = useStyles()
-  return (
-    <TableRow>
-      <TableCell colSpan={9999} className={styles.cell}>
-        <Box className={`${styles.container} ${details ? "-details" : ""}`}>
-          {title && (
-            <Typography variant="h6" className={styles.title}>
-              {title}
-            </Typography>
-          )}
-          {details && <div className={styles.details}>{details}</div>}
-        </Box>
-      </TableCell>
-    </TableRow>
-  )
-}
-
-const useStyles = makeStyles((theme) => ({
-  cell: {
-    background: "none",
-    paddingTop: theme.spacing(2),
-    paddingBottom: theme.spacing(2),
-  },
-  container: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-  },
-  title: {
-    fontSize: theme.typography.h5.fontSize,
-    fontWeight: 500,
-    color: theme.palette.text.primary,
-    textTransform: "none",
-    letterSpacing: "normal",
-  },
-  details: {
-    alignItems: "center",
-    display: "flex",
-    justifyContent: "flex-end",
-    letterSpacing: "normal",
-    margin: `0 ${theme.spacing(2)}px`,
-
-    [theme.breakpoints.down("sm")]: {
-      margin: `${theme.spacing(1)}px 0 0 0`,
-    },
-  },
-}))
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index 07319da6a94d9..1dd881d92e9a4 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -60,7 +60,7 @@ export const Workspace: FC<WorkspaceProps> = ({
     <Margins>
       <PageHeader
         actions={
-          <Stack direction="row" spacing={1}>
+          <Stack direction="row" spacing={1} className={styles.actions}>
             <WorkspaceScheduleButton
               workspace={workspace}
               onDeadlineMinus={scheduleProps.onDeadlineMinus}
@@ -123,25 +123,33 @@ export const useStyles = makeStyles((theme) => {
     statusBadge: {
       marginBottom: theme.spacing(3),
     },
+
+    actions: {
+      [theme.breakpoints.down("md")]: {
+        flexDirection: "column",
+      },
+    },
+
     firstColumnSpacer: {
       flex: 2,
     },
+
     secondColumnSpacer: {
       flex: `0 0 ${spacerWidth}px`,
     },
+
     layout: {
       alignItems: "flex-start",
     },
+
     main: {
       width: "100%",
     },
-    sidebar: {
-      width: theme.spacing(32),
-      flexShrink: 0,
-    },
+
     timelineContents: {
       margin: 0,
     },
+
     timelineTable: {
       border: 0,
     },
diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
index cfb4c5be47d6f..753a7655d52a1 100644
--- a/site/src/components/WorkspaceActions/WorkspaceActions.tsx
+++ b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
@@ -96,7 +96,9 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
   return (
     <span className={styles.buttonContainer}>
       {/* primary workspace CTA */}
-      <span data-testid="primary-cta">{buttonMapping[actions.primary]}</span>
+      <span data-testid="primary-cta" className={styles.primaryCta}>
+        {buttonMapping[actions.primary]}
+      </span>
 
       {/* popover toggle button */}
       <Button
@@ -145,7 +147,7 @@ const useStyles = makeStyles((theme) => ({
   buttonContainer: {
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: `${theme.shape.borderRadius}px`,
-    display: "inline-block",
+    display: "inline-flex",
   },
   dropdownButton: {
     border: "none",
@@ -164,6 +166,15 @@ const useStyles = makeStyles((theme) => ({
     border: "none",
     borderRadius: `${theme.shape.borderRadius}px 0px 0px ${theme.shape.borderRadius}px`,
   },
+  primaryCta: {
+    [theme.breakpoints.down("md")]: {
+      width: "100%",
+
+      "& > *": {
+        width: "100%",
+      },
+    },
+  },
   popoverActionButton: {
     "& .MuiButtonBase-root": {
       backgroundColor: "unset",
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
index d99bdef3366ae..1056a17335a54 100644
--- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
+++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
@@ -136,22 +136,25 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
 
 const useStyles = makeStyles((theme) => ({
   wrapper: {
-    display: "inline-block",
+    display: "inline-flex",
+    alignItems: "center",
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: `${theme.shape.borderRadius}px`,
   },
   label: {
     borderRight: 0,
-    height: "100%",
     padding: "0 8px 0 16px",
     color: theme.palette.text.secondary,
-    // It is from the button props
-    minHeight: 42,
+
+    [theme.breakpoints.down("md")]: {
+      width: "100%",
+    },
   },
   scheduleButton: {
     border: "none",
     borderLeft: `1px solid ${theme.palette.divider}`,
     borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px`,
+    flexShrink: 0,
   },
   iconButton: {
     borderRadius: 2,
diff --git a/site/src/components/WorkspacesTable/WorkspacesTable.tsx b/site/src/components/WorkspacesTable/WorkspacesTable.tsx
index c99559d2c6219..43fd8699821e9 100644
--- a/site/src/components/WorkspacesTable/WorkspacesTable.tsx
+++ b/site/src/components/WorkspacesTable/WorkspacesTable.tsx
@@ -1,6 +1,7 @@
 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 { FC } from "react"
@@ -23,20 +24,26 @@ export interface WorkspacesTableProps {
 
 export const WorkspacesTable: FC<WorkspacesTableProps> = ({ isLoading, workspaceRefs, filter }) => {
   return (
-    <Table>
-      <TableHead>
-        <TableRow>
-          <TableCell width="25%">{Language.name}</TableCell>
-          <TableCell width="20%">{Language.template}</TableCell>
-          <TableCell width="25%">{Language.lastBuiltBy}</TableCell>
-          <TableCell width="15%">{Language.version}</TableCell>
-          <TableCell width="15%">{Language.status}</TableCell>
-          <TableCell width="1%"></TableCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        <WorkspacesTableBody isLoading={isLoading} workspaceRefs={workspaceRefs} filter={filter} />
-      </TableBody>
-    </Table>
+    <TableContainer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell width="25%">{Language.name}</TableCell>
+            <TableCell width="20%">{Language.template}</TableCell>
+            <TableCell width="25%">{Language.lastBuiltBy}</TableCell>
+            <TableCell width="15%">{Language.version}</TableCell>
+            <TableCell width="15%">{Language.status}</TableCell>
+            <TableCell width="1%"></TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <WorkspacesTableBody
+            isLoading={isLoading}
+            workspaceRefs={workspaceRefs}
+            filter={filter}
+          />
+        </TableBody>
+      </Table>
+    </TableContainer>
   )
 }
diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
index 9deac14e03fa0..f559095a51c5e 100644
--- a/site/src/theme/overrides.ts
+++ b/site/src/theme/overrides.ts
@@ -1,8 +1,9 @@
-import { PaletteOptions, SimplePaletteColorOptions } from "@material-ui/core/styles/createPalette"
+import { Theme } from "@material-ui/core/styles"
+import { SimplePaletteColorOptions } from "@material-ui/core/styles/createPalette"
+import { Overrides } from "@material-ui/core/styles/overrides"
 import { MONOSPACE_FONT_FAMILY } from "./constants"
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const getOverrides = (palette: PaletteOptions) => {
+export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
   return {
     MuiCssBaseline: {
       "@global": {
@@ -29,12 +30,13 @@ export const getOverrides = (palette: PaletteOptions) => {
       root: {
         // Prevents a loading button from collapsing!
         minHeight: 42,
-        fontWeight: "regular",
+        fontWeight: "normal",
         fontFamily: MONOSPACE_FONT_FAMILY,
         fontSize: 16,
         textTransform: "none",
         letterSpacing: "none",
         border: `1px solid ${palette.divider}`,
+        flexShrink: 0,
       },
       contained: {
         boxShadow: "none",
@@ -71,10 +73,14 @@ export const getOverrides = (palette: PaletteOptions) => {
         textTransform: "uppercase",
       },
     },
-    MuiTable: {
+    MuiTableContainer: {
       root: {
-        // Gives the appearance of a border!
         borderRadius: 2,
+        border: `1px solid ${palette.divider}`,
+      },
+    },
+    MuiTable: {
+      root: {
         background: "hsla(222, 31%, 19%, .5)",
 
         "& td": {
@@ -82,6 +88,12 @@ export const getOverrides = (palette: PaletteOptions) => {
           paddingBottom: 16,
           background: "transparent",
         },
+
+        [breakpoints.down("md")]: {
+          // Random value based on visual adjustments.
+          // This is used to avoid line breaking on columns
+          minWidth: 1000,
+        },
       },
     },
     MuiTableCell: {
diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts
index 54d93cdc16edd..523dfd47031c6 100644
--- a/site/src/theme/theme.ts
+++ b/site/src/theme/theme.ts
@@ -1,6 +1,5 @@
 import { createMuiTheme } from "@material-ui/core/styles"
 import { PaletteOptions } from "@material-ui/core/styles/createPalette"
-import { Overrides } from "@material-ui/core/styles/overrides"
 import { borderRadius } from "./constants"
 import { getOverrides } from "./overrides"
 import { darkPalette } from "./palettes"
@@ -8,15 +7,18 @@ import { props } from "./props"
 import { typography } from "./typography"
 
 const makeTheme = (palette: PaletteOptions) => {
-  return createMuiTheme({
+  const theme = createMuiTheme({
     palette,
     typography,
     shape: {
       borderRadius,
     },
     props,
-    overrides: getOverrides(palette) as Overrides,
   })
+
+  theme.overrides = getOverrides(theme)
+
+  return theme
 }
 
 export const dark = makeTheme(darkPalette)

From 7d3814dfc1b2abab7e249a4e9c8f122a789062b5 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Mon, 25 Jul 2022 19:35:16 +0000
Subject: [PATCH 2/6] Fix lint

---
 site/src/theme/overrides.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
index f559095a51c5e..324e987199378 100644
--- a/site/src/theme/overrides.ts
+++ b/site/src/theme/overrides.ts
@@ -40,7 +40,7 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
       },
       contained: {
         boxShadow: "none",
-        color: palette.text?.primary,
+        color: palette.text.primary,
         backgroundColor: "hsl(223, 27%, 3%)",
         "&:hover": {
           boxShadow: "none",
@@ -98,12 +98,12 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
     },
     MuiTableCell: {
       head: {
-        color: palette.text?.secondary,
+        color: palette.text.secondary,
       },
       root: {
         fontFamily: MONOSPACE_FONT_FAMILY,
         fontSize: 16,
-        background: palette.background?.paper,
+        background: palette.background.paper,
         borderBottom: `1px solid ${palette.divider}`,
         padding: 8,
         // This targets the first+last td elements, and also the first+last elements
@@ -128,7 +128,7 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
         },
 
         "& input:-webkit-autofill": {
-          WebkitBoxShadow: `0 0 0 1000px ${palette.background?.paper} inset`,
+          WebkitBoxShadow: `0 0 0 1000px ${palette.background.paper} inset`,
         },
         "&:hover .MuiOutlinedInput-notchedOutline": {
           borderColor: palette.divider,

From 677b19fa5bfcba66357fc751c8e0b3031351a8c6 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Tue, 26 Jul 2022 13:15:36 +0000
Subject: [PATCH 3/6] Fix buttons

---
 .../SearchBarWithFilter/SearchBarWithFilter.tsx          | 1 +
 .../WorkspaceScheduleButton/WorkspaceScheduleButton.tsx  | 9 ++++++++-
 site/src/theme/overrides.ts                              | 1 -
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx
index 668ec0e9bda8e..841d97bea47f7 100644
--- a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx
+++ b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx
@@ -166,6 +166,7 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
     border: `1px solid ${theme.palette.divider}`,
     borderRight: "0px",
     borderRadius: `${theme.shape.borderRadius}px 0px 0px ${theme.shape.borderRadius}px`,
+    flexShrink: 0,
   },
   errorRoot: {
     color: theme.palette.error.main,
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
index 1056a17335a54..3f450ef039ff5 100644
--- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
+++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
@@ -77,7 +77,7 @@ export const WorkspaceScheduleButton: React.FC<WorkspaceScheduleButtonProps> = (
       <span className={styles.label}>
         <WorkspaceScheduleLabel workspace={workspace} />
         {canUpdateWorkspace && shouldDisplayPlusMinus(workspace) && (
-          <span>
+          <span className={styles.actions}>
             <IconButton
               className={styles.iconButton}
               size="small"
@@ -148,6 +148,13 @@ const useStyles = makeStyles((theme) => ({
 
     [theme.breakpoints.down("md")]: {
       width: "100%",
+      display: "flex",
+      alignItems: "center",
+    },
+  },
+  actions: {
+    [theme.breakpoints.down("md")]: {
+      marginLeft: "auto",
     },
   },
   scheduleButton: {
diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
index 324e987199378..9a1f9b6eb443c 100644
--- a/site/src/theme/overrides.ts
+++ b/site/src/theme/overrides.ts
@@ -36,7 +36,6 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
         textTransform: "none",
         letterSpacing: "none",
         border: `1px solid ${palette.divider}`,
-        flexShrink: 0,
       },
       contained: {
         boxShadow: "none",

From 6dead46e457e0196bca2386bf806a69dfcb4f272 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Tue, 26 Jul 2022 16:34:21 +0000
Subject: [PATCH 4/6] Fix viewport

---
 site/src/components/BuildsTable/BuildsTable.tsx      |  2 +-
 site/src/components/PageHeader/PageHeader.tsx        | 12 +++++++-----
 site/src/components/Stack/Stack.tsx                  |  2 +-
 site/src/components/TabPanel/TabPanel.tsx            |  2 +-
 site/src/components/Workspace/Workspace.tsx          |  2 +-
 .../components/WorkspaceActions/WorkspaceActions.tsx |  2 +-
 .../WorkspaceScheduleButton.tsx                      |  4 ++--
 site/src/pages/WorkspacePage/WorkspacePage.test.tsx  |  2 +-
 site/src/theme/overrides.ts                          |  2 +-
 9 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx
index c8f38d79ba070..cbf6df2b2be11 100644
--- a/site/src/components/BuildsTable/BuildsTable.tsx
+++ b/site/src/components/BuildsTable/BuildsTable.tsx
@@ -39,7 +39,7 @@ export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
 
   return (
     <TableContainer className={className}>
-      <Table data-testid="builds-table">
+      <Table aria-describedby="builds table">
         <TableHead>
           <TableRow>
             <TableCell width="20%">{Language.actionLabel}</TableCell>
diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
index d0c756541df2c..445816478b90e 100644
--- a/site/src/components/PageHeader/PageHeader.tsx
+++ b/site/src/components/PageHeader/PageHeader.tsx
@@ -13,9 +13,11 @@ export const PageHeader: React.FC<PageHeaderProps> = ({ children, actions, class
   return (
     <div className={combineClasses([styles.root, className])}>
       <hgroup>{children}</hgroup>
-      <Stack direction="row" className={styles.actions}>
-        {actions}
-      </Stack>
+      {actions && (
+        <Stack direction="row" className={styles.actions}>
+          {actions}
+        </Stack>
+      )}
     </div>
   )
 }
@@ -39,7 +41,7 @@ const useStyles = makeStyles((theme) => ({
     paddingTop: theme.spacing(6),
     paddingBottom: theme.spacing(5),
 
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down("sm")]: {
       flexDirection: "column",
       alignItems: "flex-start",
     },
@@ -66,7 +68,7 @@ const useStyles = makeStyles((theme) => ({
   actions: {
     marginLeft: "auto",
 
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down("sm")]: {
       marginTop: theme.spacing(3),
       marginLeft: "initial",
       width: "100%",
diff --git a/site/src/components/Stack/Stack.tsx b/site/src/components/Stack/Stack.tsx
index 262a8d02bd76e..a6614f1243e5f 100644
--- a/site/src/components/Stack/Stack.tsx
+++ b/site/src/components/Stack/Stack.tsx
@@ -18,7 +18,7 @@ const useStyles = makeStyles((theme) => ({
     gap: ({ spacing }: StyleProps) => theme.spacing(spacing),
     alignItems: ({ alignItems }: StyleProps) => alignItems,
 
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down("sm")]: {
       width: "100%",
     },
   },
diff --git a/site/src/components/TabPanel/TabPanel.tsx b/site/src/components/TabPanel/TabPanel.tsx
index 25eddc7f508c1..3b031517666f4 100644
--- a/site/src/components/TabPanel/TabPanel.tsx
+++ b/site/src/components/TabPanel/TabPanel.tsx
@@ -82,7 +82,7 @@ const useStyles = makeStyles((theme) => ({
       width: 890,
     },
   },
-  [theme.breakpoints.down("md")]: {
+  [theme.breakpoints.down("sm")]: {
     contentPanel: {
       width: 700,
     },
diff --git a/site/src/components/Workspace/Workspace.tsx b/site/src/components/Workspace/Workspace.tsx
index 1dd881d92e9a4..edddace4c5ed6 100644
--- a/site/src/components/Workspace/Workspace.tsx
+++ b/site/src/components/Workspace/Workspace.tsx
@@ -125,7 +125,7 @@ export const useStyles = makeStyles((theme) => {
     },
 
     actions: {
-      [theme.breakpoints.down("md")]: {
+      [theme.breakpoints.down("sm")]: {
         flexDirection: "column",
       },
     },
diff --git a/site/src/components/WorkspaceActions/WorkspaceActions.tsx b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
index 2d5bfe65d2098..b800e35a790fc 100644
--- a/site/src/components/WorkspaceActions/WorkspaceActions.tsx
+++ b/site/src/components/WorkspaceActions/WorkspaceActions.tsx
@@ -167,7 +167,7 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   primaryCta: {
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down("sm")]: {
       width: "100%",
 
       "& > *": {
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
index 3f450ef039ff5..f643b5b4acd05 100644
--- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
+++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
@@ -146,14 +146,14 @@ const useStyles = makeStyles((theme) => ({
     padding: "0 8px 0 16px",
     color: theme.palette.text.secondary,
 
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down("sm")]: {
       width: "100%",
       display: "flex",
       alignItems: "center",
     },
   },
   actions: {
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down("sm")]: {
       marginLeft: "auto",
     },
   },
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx
index 25296de6001b3..8f92fa4f26d64 100644
--- a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx
+++ b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx
@@ -169,7 +169,7 @@ describe("Workspace Page", () => {
   describe("Timeline", () => {
     it("shows the timeline build", async () => {
       await renderWorkspacePage()
-      const table = await screen.findByTestId("builds-table")
+      const table = await screen.findByRole("table", { description: "builds table" })
 
       // Wait for the results to be loaded
       await waitFor(async () => {
diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
index 9a1f9b6eb443c..265fad2a76d47 100644
--- a/site/src/theme/overrides.ts
+++ b/site/src/theme/overrides.ts
@@ -88,7 +88,7 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
           background: "transparent",
         },
 
-        [breakpoints.down("md")]: {
+        [breakpoints.down("sm")]: {
           // Random value based on visual adjustments.
           // This is used to avoid line breaking on columns
           minWidth: 1000,

From 3a0fd3e960f5d693a64925ea42d48616db28526c Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Tue, 26 Jul 2022 17:47:59 +0000
Subject: [PATCH 5/6] Revert test using table role

---
 site/src/components/BuildsTable/BuildsTable.tsx     | 2 +-
 site/src/pages/WorkspacePage/WorkspacePage.test.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx
index cbf6df2b2be11..7a0afc2815e2e 100644
--- a/site/src/components/BuildsTable/BuildsTable.tsx
+++ b/site/src/components/BuildsTable/BuildsTable.tsx
@@ -39,7 +39,7 @@ export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
 
   return (
     <TableContainer className={className}>
-      <Table aria-describedby="builds table">
+      <Table data-test-id="builds-table" aria-describedby="builds table">
         <TableHead>
           <TableRow>
             <TableCell width="20%">{Language.actionLabel}</TableCell>
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx
index 8f92fa4f26d64..25296de6001b3 100644
--- a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx
+++ b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx
@@ -169,7 +169,7 @@ describe("Workspace Page", () => {
   describe("Timeline", () => {
     it("shows the timeline build", async () => {
       await renderWorkspacePage()
-      const table = await screen.findByRole("table", { description: "builds table" })
+      const table = await screen.findByTestId("builds-table")
 
       // Wait for the results to be loaded
       await waitFor(async () => {

From 8c5e0d30de44a4c7c45ef023746fc09b030b1c2b Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Tue, 26 Jul 2022 17:55:27 +0000
Subject: [PATCH 6/6] Fix testid prop

---
 site/src/components/BuildsTable/BuildsTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/site/src/components/BuildsTable/BuildsTable.tsx
index 7a0afc2815e2e..b45421b06262d 100644
--- a/site/src/components/BuildsTable/BuildsTable.tsx
+++ b/site/src/components/BuildsTable/BuildsTable.tsx
@@ -39,7 +39,7 @@ export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
 
   return (
     <TableContainer className={className}>
-      <Table data-test-id="builds-table" aria-describedby="builds table">
+      <Table data-testid="builds-table" aria-describedby="builds table">
         <TableHead>
           <TableRow>
             <TableCell width="20%">{Language.actionLabel}</TableCell>