feat: flexbox updates on workspace page (#1963)

* feat: flexbox work on workspace page

resolves 1910

* fixing cancel text

* chromatic fixes

* resolves #1953

no overflox text on smaller screens

site/src/components/Resources/Resources.tsx

@@ -41,8 +41,8 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
             <TableHeaderRow>
               <TableCell>{Language.resourceLabel}</TableCell>
               <TableCell className={styles.agentColumn}>{Language.agentLabel}</TableCell>
-              <TableCell>{Language.statusLabel}</TableCell>
               <TableCell>{Language.accessLabel}</TableCell>
+              <TableCell>{Language.statusLabel}</TableCell>
             </TableHeaderRow>
           </TableHead>
           <TableBody>
@@ -82,11 +82,6 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
                       {agent.name}
                       <span className={styles.operatingSystem}>{agent.operating_system}</span>
                     </TableCell>
-                    <TableCell>
-                      <span style={{ color: getDisplayAgentStatus(theme, agent).color }}>
-                        {getDisplayAgentStatus(theme, agent).status}
-                      </span>
-                    </TableCell>
                     <TableCell>
                       {agent.status === "connected" && (
                         <TerminalLink
@@ -97,6 +92,11 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
                         />
                       )}
                     </TableCell>
+                    <TableCell>
+                      <span style={{ color: getDisplayAgentStatus(theme, agent).color }}>
+                        {getDisplayAgentStatus(theme, agent).status}
+                      </span>
+                    </TableCell>
                   </TableRow>
                 )
               })

site/src/components/Workspace/Workspace.tsx

@@ -42,6 +42,8 @@ export const Workspace: FC<WorkspaceProps> = ({
 
   return (
     <div className={styles.root}>
+      <Stack direction="row" spacing={3}>
+        <Stack direction="column" className={styles.firstColumnSpacer} spacing={3}>
           <div className={styles.header}>
             <div>
               <Typography variant="h4" className={styles.title}>
@@ -52,8 +54,6 @@ export const Workspace: FC<WorkspaceProps> = ({
                 {workspace.owner_name}
               </Typography>
             </div>
-
-        <div className={styles.headerActions}>
             <WorkspaceActions
               workspace={workspace}
               handleStart={handleStart}
@@ -63,22 +63,22 @@ export const Workspace: FC<WorkspaceProps> = ({
               handleCancel={handleCancel}
             />
           </div>
-      </div>
+        </Stack>
 
-      <Stack direction="row" spacing={3} className={styles.layout}>
-        <Stack spacing={3} className={styles.main}>
+        <Stack direction="column" className={styles.secondColumnSpacer} spacing={3}></Stack>
+      </Stack>
+
+      <Stack direction="row" spacing={3}>
+        <Stack direction="column" className={styles.firstColumnSpacer} spacing={3}>
           <WorkspaceScheduleBanner workspace={workspace} />
-
           <WorkspaceStats workspace={workspace} />
-
           <Resources resources={resources} getResourcesError={getResourcesError} workspace={workspace} />
-
           <WorkspaceSection title="Timeline" contentsProps={{ className: styles.timelineContents }}>
             <BuildsTable builds={builds} className={styles.timelineTable} />
           </WorkspaceSection>
         </Stack>
 
-        <Stack spacing={3} className={styles.sidebar}>
+        <Stack direction="column" className={styles.secondColumnSpacer} spacing={3}>
           <WorkspaceSchedule workspace={workspace} />
         </Stack>
       </Stack>
@@ -92,15 +92,19 @@ export const useStyles = makeStyles((theme) => {
       display: "flex",
       flexDirection: "column",
     },
+    firstColumnSpacer: {
+      flex: 2,
+    },
+    secondColumnSpacer: {
+      flex: "0 0 300px",
+    },
     header: {
       paddingTop: theme.spacing(5),
       paddingBottom: theme.spacing(5),
       fontFamily: MONOSPACE_FONT_FAMILY,
       display: "flex",
       alignItems: "center",
-    },
-    headerActions: {
-      marginLeft: "auto",
+      justifyContent: "space-between",
     },
     title: {
       fontWeight: 600,

site/src/components/WorkspaceActions/WorkspaceActions.tsx

@@ -12,14 +12,14 @@ import { Stack } from "../Stack/Stack"
 import { WorkspaceActionButton } from "../WorkspaceActionButton/WorkspaceActionButton"
 
 export const Language = {
-  stop: "Stop workspace",
-  stopping: "Stopping workspace",
-  start: "Start workspace",
-  starting: "Starting workspace",
-  delete: "Delete workspace",
-  deleting: "Deleting workspace",
+  stop: "Stop",
+  stopping: "Stopping",
+  start: "Start",
+  starting: "Starting",
+  delete: "Delete",
+  deleting: "Deleting",
   cancel: "Cancel action",
-  update: "Update workspace",
+  update: "Update",
 }
 
 /**
@@ -92,7 +92,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
       )}
       {canCancelJobs(workspaceStatus) && (
         <WorkspaceActionButton
-          className={styles.actionButton}
+          className={styles.cancelActionButton}
           icon={<CancelIcon />}
           onClick={handleCancel}
           label={Language.cancel}
@@ -111,6 +111,9 @@ const useStyles = makeStyles((theme) => ({
   actionButton: {
     // Set fixed width for the action buttons so they will not change the size
     // during the transitions
+    width: theme.spacing(16),
+  },
+  cancelActionButton: {
     width: theme.spacing(27),
   },
 }))

site/src/components/WorkspaceStats/WorkspaceStats.tsx

@@ -39,15 +39,6 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({ workspace }) => {
         </Link>
       </div>
       <div className={styles.statsDivider} />
-      <div className={styles.statItem}>
-        <span className={styles.statsLabel}>{Language.statusLabel}</span>
-        <span className={styles.statsValue}>
-          <span style={{ color: status.color }} role="status">
-            {status.status}
-          </span>
-        </span>
-      </div>
-      <div className={styles.statsDivider} />
       <div className={styles.statItem}>
         <span className={styles.statsLabel}>{Language.versionLabel}</span>
         <span className={styles.statsValue}>
@@ -65,6 +56,15 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({ workspace }) => {
           {dayjs().to(dayjs(workspace.latest_build.created_at))}
         </span>
       </div>
+      <div className={styles.statsDivider} />
+      <div className={styles.statItem}>
+        <span className={styles.statsLabel}>{Language.statusLabel}</span>
+        <span className={styles.statsValue}>
+          <span style={{ color: status.color }} role="status">
+            {status.status}
+          </span>
+        </span>
+      </div>
     </div>
   )
 }
@@ -83,7 +83,7 @@ const useStyles = makeStyles((theme) => ({
   },
 
   statItem: {
-    minWidth: theme.spacing(20),
+    minWidth: "20%",
     padding: theme.spacing(2),
     paddingTop: theme.spacing(1.75),
   },