From 9b49fa10365f8f02b9f2b74c479052cdfbf47886 Mon Sep 17 00:00:00 2001
From: Kyle Carberry <kyle@carberry.com>
Date: Fri, 21 Oct 2022 17:27:24 +0000
Subject: [PATCH] fix: Wrap applications if there are a bunch

Fixes #4672.
---
 .../Resources/ResourceCard.stories.tsx        | 24 +++++++++++++++++++
 .../src/components/Resources/ResourceCard.tsx |  8 ++++++-
 site/src/components/Stack/Stack.tsx           |  4 ++++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/site/src/components/Resources/ResourceCard.stories.tsx b/site/src/components/Resources/ResourceCard.stories.tsx
index 11684a3ec4aab..25c47aaa21efe 100644
--- 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
index 6e4d766260e5f..e8721e9f0d4f0 100644
--- 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
index 1f181816c683d..f09a07e0e7d8b 100644
--- 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 (