From 8bc81264b90d3521583cda421bbb97d362586077 Mon Sep 17 00:00:00 2001
From: Maximilian Vorbrodt <maximilian.vorbrodt@hotmail.com>
Date: Thu, 17 Nov 2022 19:06:42 +0100
Subject: [PATCH] remove paper component

Signed-off-by: Maximilian Vorbrodt <maximilian.vorbrodt@hotmail.com>
---
 .../GroupsExplorerContent/GroupsDiagram.tsx   | 48 ++++++++-----------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
index 95c6d86d27..d00eddb35e 100644
--- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
+++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
@@ -35,7 +35,7 @@ import {
   getEntityRelations,
 } from '@backstage/plugin-catalog-react';
 import { BackstageTheme } from '@backstage/theme';
-import { makeStyles, Typography, Paper, useTheme } from '@material-ui/core';
+import { makeStyles, Typography, useTheme } from '@material-ui/core';
 import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
 import classNames from 'classnames';
 import React from 'react';
@@ -43,14 +43,10 @@ import useAsync from 'react-use/lib/useAsync';
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
   graph: {
-    flex: 1,
     minHeight: '100%',
   },
   graphWrapper: {
-    position: 'relative',
-    flex: 1,
-    minHeight: 0,
-    display: 'flex',
+    height: '100%',
   },
   organizationNode: {
     fill: theme.palette.secondary.light,
@@ -236,27 +232,25 @@ export function GroupsDiagram() {
   }
 
   return (
-    <>
-      <Paper className={classes.graphWrapper}>
-        <DependencyGraph
-          nodes={nodes}
-          edges={edges}
-          nodeMargin={10}
-          direction={DependencyGraphTypes.Direction.RIGHT_LEFT}
-          renderNode={RenderNode}
-          className={classes.graph}
-        />
+    <div className={classes.graphWrapper}>
+      <DependencyGraph
+        nodes={nodes}
+        edges={edges}
+        nodeMargin={10}
+        direction={DependencyGraphTypes.Direction.RIGHT_LEFT}
+        renderNode={RenderNode}
+        className={classes.graph}
+      />
 
-        <Typography
-          variant="caption"
-          color="textSecondary"
-          display="block"
-          className={classes.legend}
-        >
-          <ZoomOutMap className="icon" /> Use pinch &amp; zoom to move around
-          the diagram.
-        </Typography>
-      </Paper>
-    </>
+      <Typography
+        variant="caption"
+        color="textSecondary"
+        display="block"
+        className={classes.legend}
+      >
+        <ZoomOutMap className="icon" /> Use pinch &amp; zoom to move around the
+        diagram.
+      </Typography>
+    </div>
   );
 }