fix: Wrap applications if there are a bunch (#4686)

kylecarbs · web-flow · commit 2c47cda3d110 · 2022-10-21T14:08:08.000-05:00
Fixes #4672.
diff --git a/site/src/components/Resources/ResourceCard.stories.tsx b/site/src/components/Resources/ResourceCard.stories.tsx
@@ -2,6 +2,7 @@ import { Story } from "@storybook/react"
 import {
   MockWorkspace,
   MockWorkspaceAgent,
+  MockWorkspaceApp,
   MockWorkspaceResource,
 } from "testHelpers/entities"
 import { ResourceCard, ResourceCardProps } from "./ResourceCard"
@@ -35,6 +36,29 @@ HideSSHButton.args = {
   hideSSHButton: true,
 }
 
+export const BunchOfApps = Template.bind({})
+BunchOfApps.args = {
+  ...Example.args,
+  resource: {
+    ...MockWorkspaceResource,
+    agents: [
+      {
+        ...MockWorkspaceAgent,
+        apps: [
+          MockWorkspaceApp,
+          MockWorkspaceApp,
+          MockWorkspaceApp,
+          MockWorkspaceApp,
+          MockWorkspaceApp,
+          MockWorkspaceApp,
+          MockWorkspaceApp,
+          MockWorkspaceApp,
+        ],
+      },
+    ],
+  },
+}
+
 export const BunchOfMetadata = Template.bind({})
 BunchOfMetadata.args = {
   ...Example.args,
diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
@@ -149,7 +149,13 @@ export const ResourceCard: FC<ResourceCardProps> = ({
                   </div>
                 </Stack>
 
-                <Stack direction="row" alignItems="center" spacing={0.5}>
+                <Stack
+                  direction="row"
+                  alignItems="center"
+                  spacing={0.5}
+                  wrap="wrap"
+                  maxWidth="750px"
+                >
                   {showApps && agent.status === "connected" && (
                     <>
                       {applicationsHost !== undefined && (
diff --git a/site/src/components/Stack/Stack.tsx b/site/src/components/Stack/Stack.tsx
@@ -12,6 +12,7 @@ export type StackProps = {
   spacing?: number
   alignItems?: CSSProperties["alignItems"]
   justifyContent?: CSSProperties["justifyContent"]
+  maxWidth?: CSSProperties["maxWidth"]
   wrap?: CSSProperties["flexWrap"]
 } & React.HTMLProps<HTMLDivElement>
 
@@ -25,6 +26,7 @@ const useStyles = makeStyles((theme) => ({
     alignItems: ({ alignItems }: StyleProps) => alignItems,
     justifyContent: ({ justifyContent }: StyleProps) => justifyContent,
     flexWrap: ({ wrap }: StyleProps) => wrap,
+    maxWidth: ({ maxWidth }: StyleProps) => maxWidth,
 
     [theme.breakpoints.down("sm")]: {
       width: "100%",
@@ -39,6 +41,7 @@ export const Stack: FC<StackProps & { children: ReactNode | ReactNode[] }> = ({
   spacing = 2,
   alignItems,
   justifyContent,
+  maxWidth,
   wrap,
   ...divProps
 }) => {
@@ -48,6 +51,7 @@ export const Stack: FC<StackProps & { children: ReactNode | ReactNode[] }> = ({
     alignItems,
     justifyContent,
     wrap,
+    maxWidth,
   })
 
   return (
