From d4368d1f9498283e9f3d40dbb86e53a15116d91a Mon Sep 17 00:00:00 2001
From: Maximilian Vorbrodt <maximilian.vorbrodt@hotmail.com>
Date: Mon, 14 Nov 2022 15:16:35 +0100
Subject: [PATCH] make graph fill only visiable space on the page

Signed-off-by: Maximilian Vorbrodt <maximilian.vorbrodt@hotmail.com>
---
 .../src/components/DependencyGraph/DependencyGraph.tsx        | 4 +++-
 .../src/components/GroupsExplorerContent/GroupsDiagram.tsx    | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx
index 64d39a4425..5dd8664107 100644
--- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx
+++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx
@@ -223,6 +223,7 @@ export function DependencyGraph<NodeData, EdgeData>(
 
   const maxWidth = Math.max(graphWidth, containerWidth);
   const maxHeight = Math.max(graphHeight, containerHeight);
+  const minHeight = Math.min(graphHeight, containerHeight);
 
   const containerRef = React.useMemo(
     () =>
@@ -393,7 +394,8 @@ export function DependencyGraph<NodeData, EdgeData>(
     <svg
       ref={containerRef}
       {...svgProps}
-      width="100%"
+      width='100%'
+      height={minHeight}
       viewBox={`0 0 ${maxWidth} ${maxHeight}`}
     >
       <defs>
diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
index c366d1c6c1..95c6d86d27 100644
--- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
+++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
@@ -44,7 +44,7 @@ import useAsync from 'react-use/lib/useAsync';
 const useStyles = makeStyles((theme: BackstageTheme) => ({
   graph: {
     flex: 1,
-    minHeight: 0,
+    minHeight: '100%',
   },
   graphWrapper: {
     position: 'relative',