From 4c42ecca2d106c80f358655b7e0863be463049c6 Mon Sep 17 00:00:00 2001
From: Andrew Shirley <andrew@als-bi.com>
Date: Mon, 19 Apr 2021 16:31:30 +0100
Subject: [PATCH] Wrap EmptyState in a Card

This prevents it overflowing onto subsequent content

Signed-off-by: Andrew Shirley <andrew@als-bi.com>
---
 .changeset/empty-lizards-doubt.md             |  5 +++
 .../Cards/RecentWorkflowRunsCard.tsx          | 43 ++++++++++++-------
 2 files changed, 33 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/empty-lizards-doubt.md

diff --git a/.changeset/empty-lizards-doubt.md b/.changeset/empty-lizards-doubt.md
new file mode 100644
index 0000000000..cfe1e128fc
--- /dev/null
+++ b/.changeset/empty-lizards-doubt.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-github-actions': patch
+---
+
+Wrap EmptyState in Card
diff --git a/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx b/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx
index 1126c2a2a0..a3605abb7e 100644
--- a/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx
+++ b/plugins/github-actions/src/components/Cards/RecentWorkflowRunsCard.tsx
@@ -25,7 +25,14 @@ import {
 } from '@backstage/core';
 import { readGitHubIntegrationConfigs } from '@backstage/integration';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { Button, Link } from '@material-ui/core';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Divider,
+  Link,
+} from '@material-ui/core';
 import React, { useEffect } from 'react';
 import { generatePath, Link as RouterLink } from 'react-router-dom';
 import { GITHUB_ACTIONS_ANNOTATION } from '../useProjectName';
@@ -75,20 +82,26 @@ export const RecentWorkflowRunsCard = ({
   const githubHost = hostname || 'github.com';
 
   return !runs.length ? (
-    <EmptyState
-      missing="data"
-      title="No Workflow Data"
-      description="This component has GitHub Actions enabled, but no data was found. Have you created any Workflows? Click the button below to create a new Workflow."
-      action={
-        <Button
-          variant="contained"
-          color="primary"
-          href={`https://${githubHost}/${owner}/${repo}/actions/new`}
-        >
-          Create new Workflow
-        </Button>
-      }
-    />
+    <Card>
+      <CardHeader title="Recent Workflow Runs" />
+      <Divider />
+      <CardContent>
+        <EmptyState
+          missing="data"
+          title="No Workflow Data"
+          description="This component has GitHub Actions enabled, but no data was found. Have you created any Workflows? Click the button below to create a new Workflow."
+          action={
+            <Button
+              variant="contained"
+              color="primary"
+              href={`https://${githubHost}/${owner}/${repo}/actions/new`}
+            >
+              Create new Workflow
+            </Button>
+          }
+        />
+      </CardContent>
+    </Card>
   ) : (
     <InfoCard
       title="Recent Workflow Runs"