Merge pull request #14403 from vorbrodt/fix-group-diagram-scroll-behaviour

Fix group diagram scroll behaviour

plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx

@@ -43,8 +43,10 @@ import useAsync from 'react-use/lib/useAsync';
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
   graph: {
-    flex: 1,
-    minHeight: 0,
+    minHeight: '100%',
+  },
+  graphWrapper: {
+    height: '100%',
   },
   organizationNode: {
     fill: theme.palette.secondary.light,
@@ -62,6 +64,15 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
     justifyContent: 'center',
     color: 'black',
   },
+  legend: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    padding: theme.spacing(1),
+    '& .icon': {
+      verticalAlign: 'bottom',
+    },
+  },
   textOrganization: {
     color: theme.palette.secondary.contrastText,
   },
@@ -221,7 +232,7 @@ export function GroupsDiagram() {
   }
 
   return (
-    <>
+    <div className={classes.graphWrapper}>
       <DependencyGraph
         nodes={nodes}
         edges={edges}
@@ -229,14 +240,18 @@ export function GroupsDiagram() {
         direction={DependencyGraphTypes.Direction.RIGHT_LEFT}
         renderNode={RenderNode}
         className={classes.graph}
+        fit="contain"
       />
+
       <Typography
         variant="caption"
-        style={{ display: 'block', textAlign: 'right' }}
+        color="textSecondary"
+        display="block"
+        className={classes.legend}
       >
-        <ZoomOutMap style={{ verticalAlign: 'bottom' }} /> Use pinch &amp; zoom
-        to move around the diagram.
+        <ZoomOutMap className="icon" /> Use pinch &amp; zoom to move around the
+        diagram.
       </Typography>
-    </>
+    </div>
   );
 }