From 4742508f06b99e62df0312f64543f53740ee090d Mon Sep 17 00:00:00 2001
From: Deepak Bhardwaj <62239457+deepak-bhardwaj-ps@users.noreply.github.com>
Date: Fri, 25 Jun 2021 21:21:11 +0530
Subject: [PATCH 1/4] fix: Sys Diagram clipped if wider than container

Signed-off-by: Deepak Bhardwaj <Deepak.Bhardwaj@outlook.com>
Signed-off-by: Deepak Bhardwaj <62239457+deepak-bhardwaj-ps@users.noreply.github.com>
Signed-off-by: Deepak Bhardwaj <deepak.bhardwaj@outlook.com>
---
 .../src/components/DependencyGraph/DependencyGraph.tsx          | 2 +-
 .../src/components/SystemDiagramCard/SystemDiagramCard.tsx      | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx
index 5c0442f906..89f7421d2a 100644
--- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx
+++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx
@@ -262,7 +262,7 @@ export function DependencyGraph({
     <svg
       ref={containerRef}
       {...svgProps}
-      width={maxWidth}
+      width="100%"
       height={maxHeight}
       viewBox={`0 0 ${maxWidth} ${maxHeight}`}
     >
diff --git a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
index 5af4755bcb..a56d101d34 100644
--- a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
+++ b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
@@ -262,6 +262,8 @@ export function SystemDiagramCard() {
         nodeMargin={10}
         direction={DependencyGraphTypes.Direction.BOTTOM_TOP}
         renderNode={RenderNode}
+        paddingX={50}
+        paddingY={50}
       />
       <Box m={1} />
       <Typography

From f423891ee1dd46fe38c3964c3d8376088b0baf58 Mon Sep 17 00:00:00 2001
From: Deepak Bhardwaj <deepak.bhardwaj@outlook.com>
Date: Fri, 25 Jun 2021 21:55:01 +0530
Subject: [PATCH 2/4] Updated changeset

Signed-off-by: Deepak Bhardwaj <deepak.bhardwaj@outlook.com>
---
 .changeset/grumpy-sloths-check.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/grumpy-sloths-check.md

diff --git a/.changeset/grumpy-sloths-check.md b/.changeset/grumpy-sloths-check.md
new file mode 100644
index 0000000000..124898b7fd
--- /dev/null
+++ b/.changeset/grumpy-sloths-check.md
@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-catalog': patch
+---
+
+System Diagram was getting clipped when it was wider than the container.

From 496ff9be1748e57a24dfc6272aa885e3c9f3070f Mon Sep 17 00:00:00 2001
From: Deepak Bhardwaj <deepak.bhardwaj@outlook.com>
Date: Sat, 26 Jun 2021 09:52:01 +0530
Subject: [PATCH 3/4] Used theme spacing

Signed-off-by: Deepak Bhardwaj <deepak.bhardwaj@outlook.com>
---
 .../src/components/SystemDiagramCard/SystemDiagramCard.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
index a56d101d34..272ad8a6d6 100644
--- a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
+++ b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
@@ -29,7 +29,7 @@ import {
   getEntityRelations,
   useEntity,
 } from '@backstage/plugin-catalog-react';
-import { Box, makeStyles, Typography } from '@material-ui/core';
+import { Box, makeStyles, Typography, useTheme } from '@material-ui/core';
 import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
 import React from 'react';
 import { useAsync } from 'react-use';
@@ -151,6 +151,7 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps<any>) {
  */
 export function SystemDiagramCard() {
   const { entity } = useEntity();
+  const theme = useTheme();
   const currentSystemName = entity.metadata.name;
   const currentSystemNode = stringifyEntityRef(entity);
   const systemNodes = new Array<{ id: string; kind: string; name: string }>();
@@ -262,8 +263,8 @@ export function SystemDiagramCard() {
         nodeMargin={10}
         direction={DependencyGraphTypes.Direction.BOTTOM_TOP}
         renderNode={RenderNode}
-        paddingX={50}
-        paddingY={50}
+        paddingX={theme.spacing(4)}
+        paddingY={theme.spacing(4)}
       />
       <Box m={1} />
       <Typography

From e4c12be46724f1498ab517c576cf1a1dee09ee6a Mon Sep 17 00:00:00 2001
From: Deepak Bhardwaj <deepak.bhardwaj@outlook.com>
Date: Sat, 26 Jun 2021 10:10:31 +0530
Subject: [PATCH 4/4] Updated changeset description

Signed-off-by: Deepak Bhardwaj <deepak.bhardwaj@outlook.com>
---
 .changeset/grumpy-sloths-check.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/grumpy-sloths-check.md b/.changeset/grumpy-sloths-check.md
index 124898b7fd..e2c2483c00 100644
--- a/.changeset/grumpy-sloths-check.md
+++ b/.changeset/grumpy-sloths-check.md
@@ -3,4 +3,4 @@
 '@backstage/plugin-catalog': patch
 ---
 
-System Diagram was getting clipped when it was wider than the container.
+Fixed sizing of the System diagram when the rendered graph was wider than the container.