refactor: Align values when there are more than one row in agent preview (#4795)

site/src/components/AppLink/AppPreviewLink.tsx

@@ -35,9 +35,10 @@ const useStyles = makeStyles((theme) => ({
     background: theme.palette.background.paper,
     flexShrink: 0,
     width: "fit-content",
+    fontSize: 12,
 
     "& img, & svg": {
-      width: 14,
+      width: 13,
     },
   },
 }))

site/src/components/Resources/AgentRowPreview.tsx

@@ -6,12 +6,20 @@ import { combineClasses } from "util/combineClasses"
 import { WorkspaceAgent } from "../../api/typesGenerated"
 import { Stack } from "../Stack/Stack"
 
-export interface AgentRowPreviewProps {
+interface AgentRowPreviewStyles {
+  // Helpful when there are more than one row so the values are aligned
+  // When it is only one row, it is better to have than "flex" and not hard aligned
+  alignValues?: boolean
+}
+export interface AgentRowPreviewProps extends AgentRowPreviewStyles {
   agent: WorkspaceAgent
 }
 
-export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
-  const styles = useStyles()
+export const AgentRowPreview: FC<AgentRowPreviewProps> = ({
+  agent,
+  alignValues,
+}) => {
+  const styles = useStyles({ alignValues })
   const { t } = useTranslation("agent")
 
   return (
@@ -36,7 +44,11 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
             direction="row"
             alignItems="baseline"
             spacing={1}
-            className={combineClasses([styles.noShrink, styles.agentDataItem])}
+            className={combineClasses([
+              styles.noShrink,
+              styles.agentDataItem,
+              styles.agentDataName,
+            ])}
           >
             <span>{t("labels.agent").toString()}:</span>
             <span className={styles.agentDataValue}>{agent.name}</span>
@@ -46,7 +58,11 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({ agent }) => {
             direction="row"
             alignItems="baseline"
             spacing={1}
-            className={combineClasses([styles.noShrink, styles.agentDataItem])}
+            className={combineClasses([
+              styles.noShrink,
+              styles.agentDataItem,
+              styles.agentDataOS,
+            ])}
           >
             <span>{t("labels.os").toString()}:</span>
             <span
@@ -142,6 +158,20 @@ const useStyles = makeStyles((theme) => ({
     },
   },
 
+  agentDataName: {
+    [theme.breakpoints.up("sm")]: {
+      minWidth: ({ alignValues }: AgentRowPreviewStyles) =>
+        alignValues ? 240 : undefined,
+    },
+  },
+
+  agentDataOS: {
+    [theme.breakpoints.up("sm")]: {
+      minWidth: ({ alignValues }: AgentRowPreviewStyles) =>
+        alignValues ? 100 : undefined,
+    },
+  },
+
   agentDataValue: {
     color: theme.palette.text.primary,
   },

site/src/components/Resources/Resources.tsx

@@ -15,7 +15,7 @@ const countAgents = (resource: WorkspaceResource) => {
 
 interface ResourcesProps {
   resources: WorkspaceResource[]
-  agentRow: (agent: WorkspaceAgent) => JSX.Element
+  agentRow: (agent: WorkspaceAgent, numberOfAgents: number) => JSX.Element
 }
 
 export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
@@ -39,7 +39,7 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
         <ResourceCard
           key={resource.id}
           resource={resource}
-          agentRow={agentRow}
+          agentRow={(agent) => agentRow(agent, countAgents(resource))}
         />
       ))}
       {hasHideResources && (

site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx

@@ -13,7 +13,11 @@ export const TemplateResourcesTable: FC<
   return (
     <Resources
       resources={resources}
-      agentRow={(agent) => <AgentRowPreview key={agent.id} agent={agent} />}
+      agentRow={(agent, count) => (
+        // Align values if there are more than one row
+        // When it is only one row, it is better to have it "flex" and not hard aligned
+        <AgentRowPreview key={agent.id} agent={agent} alignValues={count > 1} />
+      )}
     />
   )
 }