fix: reduce spacing when agent metadata doesn't exist

kylecarbs · kylecarbs · commit 4ad9003d90e3 · 2023-03-31T21:18:48.000Z
diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
@@ -251,7 +251,16 @@ export const AgentMetadata: FC<{
   }, [agent.id, watchAgentMetadata])
 
   if (metadata === undefined) {
-    return <CircularProgress size={16} />
+    return (
+      <div
+        style={{
+          marginTop: 16,
+          marginBottom: 16,
+        }}
+      >
+        <CircularProgress size={16} />
+      </div>
+    )
   }
 
   return <AgentMetadataView metadata={metadata} />
@@ -264,6 +273,8 @@ const useStyles = makeStyles((theme) => ({
     border: `2px dashed ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadius,
     width: "100%",
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
   },
   metadataHeader: {
     padding: "8px",
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
@@ -180,11 +180,7 @@ export const AgentRow: FC<AgentRowProps> = ({
         <div className={styles.agentStatusWrapper}>
           <AgentStatus agent={agent} />
         </div>
-        <Stack
-          direction="column"
-          alignItems="flex-start"
-          key={agent.id}
-          spacing={2}
+        <div
           style={{
             flex: 1,
           }}
@@ -364,7 +360,7 @@ export const AgentRow: FC<AgentRowProps> = ({
               </Popover>
             </Stack>
           )}
-        </Stack>
+        </div>
       </Stack>
       {showStartupLogs && (
         <AutoSizer disableHeight>
