From 84b654d5de3b15c2c521bea723ed679979012599 Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Wed, 11 Nov 2020 13:34:40 +0100
Subject: [PATCH] Use dense table style and outlined chips in the API Explorer
 (#3276)

This matches the styling of the catalog.
---
 .changeset/perfect-boats-attack.md                       | 5 +++++
 .../src/components/ApiExplorerTable/ApiExplorerTable.tsx | 9 ++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/perfect-boats-attack.md

diff --git a/.changeset/perfect-boats-attack.md b/.changeset/perfect-boats-attack.md
new file mode 100644
index 0000000000..51c327127a
--- /dev/null
+++ b/.changeset/perfect-boats-attack.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-api-docs': patch
+---
+
+Use dense table style and outlined chips in the API Explorer.
diff --git a/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
index e12d172e41..9222623aed 100644
--- a/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
+++ b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
@@ -90,7 +90,13 @@ const columns: TableColumn<Entity>[] = [
       <>
         {entity.metadata.tags &&
           entity.metadata.tags.map(t => (
-            <Chip key={t} label={t} style={{ marginBottom: '0px' }} />
+            <Chip
+              key={t}
+              label={t}
+              size="small"
+              variant="outlined"
+              style={{ marginBottom: '0px' }}
+            />
           ))}
       </>
     ),
@@ -149,6 +155,7 @@ export const ApiExplorerTable = ({
         paging: false,
         actionsColumnIndex: -1,
         loadingType: 'linear',
+        padding: 'dense',
         showEmptyDataSourceMessage: !loading,
       }}
       data={entities}