Added fix for providing React flow flex dimensions

Signed-off-by: Jason Porter <[email protected]>

src/components/Workflow/StaticGraphContainer.tsx

@@ -42,11 +42,12 @@ export interface StaticGraphContainerProps {
 export const StaticGraphContainer: React.FC<StaticGraphContainerProps> = ({
     workflowId
 }) => {
-    const containerStyle = {
-        width: '100%',
-        height: '30%',
-        maxHeight: '400px',
-        minHeight: '220px'
+    const containerStyle: React.CSSProperties = {
+        display: 'flex',
+        flexDirection: 'column',
+        flex: `1 1 100%`,
+        minHeight: 300,
+        padding: '1rem 0'
     };
     const workflowQuery = useQuery<Workflow, Error>(
         makeWorkflowQuery(useQueryClient(), workflowId)

src/components/flytegraph/ReactFlow/ReactFlowGraphComponent.tsx

@@ -25,11 +25,20 @@ const ReactFlowGraphComponent = props => {
         rfGraphJson: rfGraphJson,
         type: RFGraphTypes.main
     };
+
+    const containerStyle: React.CSSProperties = {
+        display: 'flex',
+        flex: `1 1 100%`,
+        flexDirection: 'column',
+        minHeight: '100px',
+        minWidth: '200px'
+    };
+
     return (
-        <>
+        <div style={containerStyle}>
             <Legend />
             <ReactFlowWrapper {...ReactFlowProps} />
-        </>
+        </div>
     );
 };
 

src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx

@@ -134,7 +134,9 @@ export const ReactFlowWrapper: React.FC<RFWrapperProps> = ({
      * React Flow's min height to make it render
      */
     const reactFlowStyle: React.CSSProperties = {
-        minHeight: 220
+        display: 'flex',
+        flex: `1 1 100%`,
+        flexDirection: 'column'
     };
 
     return (