From a96340c85ec7eb3d4a002f4b5388b8f9aaa71d7a Mon Sep 17 00:00:00 2001
From: Keita Nonaka <keita.nonaka@hpe.com>
Date: Wed, 22 Mar 2023 16:45:05 -0700
Subject: [PATCH] fix: workspace card issue

---
 .../src/pages/WorkspaceList/WorkspaceCard.tsx | 55 ++++++++++---------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/webui/react/src/pages/WorkspaceList/WorkspaceCard.tsx b/webui/react/src/pages/WorkspaceList/WorkspaceCard.tsx
index 1fe0044e726..7f573c695a7 100644
--- a/webui/react/src/pages/WorkspaceList/WorkspaceCard.tsx
+++ b/webui/react/src/pages/WorkspaceList/WorkspaceCard.tsx
@@ -33,36 +33,41 @@ const WorkspaceCard: React.FC<Props> = ({ workspace, fetchWorkspaces }: Props) =
   if (workspace.archived) classnames.push(css.archived);
 
   return (
-    <Card
-      actionMenu={!workspace.immutable ? menuProps : undefined}
-      href={paths.workspaceDetails(workspace.id)}
-      size="medium">
-      <div className={classnames.join(' ')}>
-        <div className={css.icon}>
-          <DynamicIcon name={workspace.name} size={78} />
-        </div>
-        <div className={css.info}>
-          <div className={css.nameRow}>
-            <Typography.Title className={css.name} ellipsis={{ rows: 1, tooltip: true }} level={5}>
-              {workspace.name}
-            </Typography.Title>
-            {workspace.pinned && <PushpinOutlined className={css.pinned} />}
+    <>
+      <Card
+        actionMenu={!workspace.immutable ? menuProps : undefined}
+        href={paths.workspaceDetails(workspace.id)}
+        size="medium">
+        <div className={classnames.join(' ')}>
+          <div className={css.icon}>
+            <DynamicIcon name={workspace.name} size={78} />
           </div>
-          <p className={css.projects}>
-            {workspace.numProjects} {pluralizer(workspace.numProjects, 'project')}
-          </p>
-          <div className={css.avatarRow}>
-            <div className={css.avatar}>
-              <Spinner conditionalRender spinning={Loadable.isLoading(user)}>
-                {Loadable.isLoaded(user) && <Avatar user={user.data} />}
-              </Spinner>
+          <div className={css.info}>
+            <div className={css.nameRow}>
+              <Typography.Title
+                className={css.name}
+                ellipsis={{ rows: 1, tooltip: true }}
+                level={5}>
+                {workspace.name}
+              </Typography.Title>
+              {workspace.pinned && <PushpinOutlined className={css.pinned} />}
+            </div>
+            <p className={css.projects}>
+              {workspace.numProjects} {pluralizer(workspace.numProjects, 'project')}
+            </p>
+            <div className={css.avatarRow}>
+              <div className={css.avatar}>
+                <Spinner conditionalRender spinning={Loadable.isLoading(user)}>
+                  {Loadable.isLoaded(user) && <Avatar user={user.data} />}
+                </Spinner>
+              </div>
+              {workspace.archived && <div className={css.archivedBadge}>Archived</div>}
             </div>
-            {workspace.archived && <div className={css.archivedBadge}>Archived</div>}
           </div>
         </div>
-      </div>
+      </Card>
       {contextHolders}
-    </Card>
+    </>
   );
 };