From 36d6ec5d86f5fff58e47bf33331a507269cfe2c6 Mon Sep 17 00:00:00 2001
From: Maximilian Vorbrodt <maximilian.vorbrodt@hotmail.com>
Date: Fri, 9 Dec 2022 11:56:46 +0100
Subject: [PATCH 1/3] make diagram scale to viewport without growing on its own

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

diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
index 674ef1e43f..371548fb2e 100644
--- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
+++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
@@ -43,9 +43,12 @@ import useAsync from 'react-use/lib/useAsync';
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
   graph: {
+    height: '100%',
+    position: 'absolute',
     minHeight: '100%',
   },
   graphWrapper: {
+    position: 'relative',
     height: '100%',
   },
   organizationNode: {

From d318d4f659abfae2418e5297b73819e5ffd9cf00 Mon Sep 17 00:00:00 2001
From: Maximilian Vorbrodt <maximilian.vorbrodt@hotmail.com>
Date: Fri, 9 Dec 2022 12:06:45 +0100
Subject: [PATCH 2/3] add changeset

Signed-off-by: Maximilian Vorbrodt <maximilian.vorbrodt@hotmail.com>
---
 .changeset/thick-stingrays-smile.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/thick-stingrays-smile.md

diff --git a/.changeset/thick-stingrays-smile.md b/.changeset/thick-stingrays-smile.md
new file mode 100644
index 0000000000..2b56803ede
--- /dev/null
+++ b/.changeset/thick-stingrays-smile.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-explore': patch
+---
+
+Makes the `GroupsDiagram` not grown on screen on its own.

From da89b09b0feb0a79982ff213b1a5fe09cb737de1 Mon Sep 17 00:00:00 2001
From: Maximilian Vorbrodt <maximilian.vorbrodt@hotmail.com>
Date: Sun, 18 Dec 2022 10:17:48 +0100
Subject: [PATCH 3/3] makes whole graph visible when loading page and does not
 grow on its own

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

diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
index 371548fb2e..fd1d5ba5fb 100644
--- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
+++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx
@@ -43,12 +43,11 @@ import useAsync from 'react-use/lib/useAsync';
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
   graph: {
-    height: '100%',
-    position: 'absolute',
     minHeight: '100%',
+    flex: 1,
   },
   graphWrapper: {
-    position: 'relative',
+    display: 'flex',
     height: '100%',
   },
   organizationNode: {