fix: Statuses breaking line in the UI (#3071)

* fix: Fix statuses breaking line in the UI

* fix: AppLink stories

site/src/components/AppLink/AppLink.stories.tsx

@@ -14,7 +14,7 @@ WithIcon.args = {
   userName: "developer",
   workspaceName: MockWorkspace.name,
   appName: "code-server",
-  appIcon: "/code.svg",
+  appIcon: "/icon/code.svg",
 }
 
 export const WithoutIcon = Template.bind({})

site/src/components/AppLink/AppLink.tsx

@@ -38,6 +38,7 @@ export const AppLink: FC<AppLinkProps> = ({ userName, workspaceName, appName, ap
       <Button
         size="small"
         startIcon={appIcon ? <img alt={`${appName} Icon`} src={appIcon} /> : <ComputerIcon />}
+        className={styles.button}
       >
         {appName}
       </Button>
@@ -49,4 +50,8 @@ const useStyles = makeStyles(() => ({
   link: {
     textDecoration: "none !important",
   },
+
+  button: {
+    whiteSpace: "nowrap",
+  },
 }))

site/src/components/BuildsTable/BuildsTable.tsx

@@ -79,7 +79,9 @@ export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
                   </span>
                 </TableCellLink>
                 <TableCellLink to={buildPageLink}>
-                  <span style={{ color: status.color }}>{status.status}</span>
+                  <span style={{ color: status.color }} className={styles.status}>
+                    {status.status}
+                  </span>
                 </TableCellLink>
                 <TableCellLink to={buildPageLink}>
                   <div className={styles.arrowCell}>
@@ -126,4 +128,7 @@ const useStyles = makeStyles((theme) => ({
   arrowCell: {
     display: "flex",
   },
+  status: {
+    whiteSpace: "nowrap",
+  },
 }))

site/src/components/Resources/Resources.tsx

@@ -100,7 +100,9 @@ export const Resources: FC<ResourcesProps> = ({
                       {agent.name}
                       <div className={styles.agentInfo}>
                         <span className={styles.operatingSystem}>{agent.operating_system}</span>
-                        <span style={{ color: agentStatus.color }}>{agentStatus.status}</span>
+                        <span style={{ color: agentStatus.color }} className={styles.status}>
+                          {agentStatus.status}
+                        </span>
                       </div>
                     </TableCell>
                     <TableCell>
@@ -182,4 +184,8 @@ const useStyles = makeStyles((theme) => ({
     flexWrap: "wrap",
     justifyContent: "flex-end",
   },
+
+  status: {
+    whiteSpace: "nowrap",
+  },
 }))