elyra-ai#2244 Dragging Bottom Panel beyond its max height hides Right…

… Flyout Buttons (elyra-ai#2245)

Signed-off-by: srikant <[email protected]>

canvas_modules/common-canvas/src/common-canvas/cc-bottom-panel.jsx

@@ -19,7 +19,9 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import Logger from "../logging/canvas-logger.js";
 
-const MARGIN_TOP = 100;
+// Margin must be equal to or greater than the toolbar height
+// plus the minimum allowed height for the canvas which is 150px.
+const MARGIN_TOP = 200;
 const MIN_HEIGHT = 75;
 
 class CanvasBottomPanel extends React.Component {
@@ -61,13 +63,13 @@ class CanvasBottomPanel extends React.Component {
 	// Returns a new height for the bottom panel limited by the need to enforce
 	// a minimum and maximum height.
 	limitHeight(ht) {
-		const canvasContainer = document.getElementById(this.props.containingDivId);
+		const containingDiv = document.getElementById(this.props.containingDivId);
 		let height = ht;
 
-		// canvasContainer may not be available in some test situations
-		if (canvasContainer) {
-			const canvasHeight = canvasContainer.getBoundingClientRect().height;
-			const maxHeight = canvasHeight - MARGIN_TOP;
+		// containingDiv may not be available in some test situations
+		if (containingDiv) {
+			const containingDivHt = containingDiv.getBoundingClientRect().height;
+			const maxHeight = containingDivHt - MARGIN_TOP;
 			height = Math.min(Math.max(height, MIN_HEIGHT), maxHeight);
 		}
 		return height;

canvas_modules/harness/cypress/e2e/canvas/bottom-panel.cy.js

@@ -41,14 +41,14 @@ describe("Testing bottom panel", function() {
 	it("Testing bottom panel max height", function() {
 		// Test bottom panel does not exceed max-size successfully
 		cy.moveBottomPanelDivider(50);
-		cy.verifyBottomPanelHeight(650);
+		cy.verifyBottomPanelHeight(550);
 	});
 
 	it("Testing bottom panel max height with rightFlyout open", function() {
 		// Test bottom panel does not exceed max-size successfully with the right flyout open
 		cy.setCanvasConfig({ "selectedShowRightFlyout": true });
 		cy.moveBottomPanelDivider(50);
-		cy.verifyBottomPanelHeight(650.1281127929688);
+		cy.verifyBottomPanelHeight(550.1281127929688);
 		cy.verifyBottomPanelWidth(1028);
 	});