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

BrunoQuaresma · web-flow · commit 916c388d8de3 · 2022-07-20T17:11:20.000Z
* fix: Fix statuses breaking line in the UI

* fix: AppLink stories
diff --git a/site/src/components/AppLink/AppLink.stories.tsx b/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({})
diff --git a/site/src/components/AppLink/AppLink.tsx b/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",
+  },
 }))
diff --git a/site/src/components/BuildsTable/BuildsTable.tsx b/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",
+  },
 }))
diff --git a/site/src/components/Resources/Resources.tsx b/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",
+  },
 }))

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ WithIcon.args = {`
`14`	`14`	`userName: "developer",`
`15`	`15`	`workspaceName: MockWorkspace.name,`
`16`	`16`	`appName: "code-server",`
`17`		`- appIcon: "/code.svg",`
	`17`	`+ appIcon: "/icon/code.svg",`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`export const WithoutIcon = Template.bind({})`