Merge pull request #6227 from deepak-bhardwaj-ps/fix-system-diagram

fix: Sys Diagram clipped if wider than container

.changeset/grumpy-sloths-check.md

@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-catalog': patch
+---
+
+Fixed sizing of the System diagram when the rendered graph was wider than the container.

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}`}
     >

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,6 +263,8 @@ export function SystemDiagramCard() {
         nodeMargin={10}
         direction={DependencyGraphTypes.Direction.BOTTOM_TOP}
         renderNode={RenderNode}
+        paddingX={theme.spacing(4)}
+        paddingY={theme.spacing(4)}
       />
       <Box m={1} />
       <Typography