#2106 Fix node editor resize button position (#2121)

Signed-off-by: Carita Ou <[email protected]>
elyra-ai · Aug 27, 2024 · 52e740e · 52e740e
1 parent 62b5521
commit 52e740e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 40 deletions.
diff --git a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx
@@ -592,11 +592,11 @@ class PropertiesMain extends React.Component {
 						onBlur={this.onBlur}
 						style={overrideStyle}
 					>
-						{resizeBtn}
 						{propertiesTitle}
 						{propertiesDialog}
 						{buttonsContainer}
 					</aside>
+					{resizeBtn}
 				</Provider>
 			);
 		}

diff --git a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.scss b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.scss
@@ -31,60 +31,51 @@ $properties-resize-button-size: $spacing-06;
 
 	&.properties-small {
 		width: $common-properties-small-flyout-width;
-		.properties-btn-resize {
-			right: calc(#{$common-properties-small-flyout-width} - (#{$properties-resize-button-size} / 2));
-		}
 	}
 	&.properties-medium {
 		width: $common-properties-medium-flyout-width;
-		.properties-btn-resize {
-			right: calc(#{$common-properties-medium-flyout-width} - (#{$properties-resize-button-size} / 2));
-		}
 	}
 	&.properties-large {
 		width: $common-properties-large-flyout-width;
-		.properties-btn-resize {
-			right: calc(#{$common-properties-large-flyout-width} - (#{$properties-resize-button-size} / 2));
-		}
 	}
 	&.properties-max {
 		width: $common-properties-max-flyout-width;
-		.properties-btn-resize {
-			right: calc(#{$common-properties-max-flyout-width} - (#{$properties-resize-button-size} / 2));
-		}
 	}
+}
+
+.properties-btn-resize {
+	transition: visibility $duration-moderate-01, opacity $duration-moderate-01;
+	opacity: 0;
+	visibility: hidden;
+	position: relative;
+	right: calc(#{$properties-resize-button-size} / 2);
+	bottom: 50%;
+	min-height: $properties-resize-button-size;
+	min-width: $properties-resize-button-size;
+	background-color: $layer-01;
+	border: 1px $border-strong-01 solid;
+	padding: $spacing-01;
+	justify-content: center;
+	align-items: center;
 	&:hover {
-		.properties-btn-resize {
-			visibility: visible;
-			opacity: 1;
-		}
+		background-color: $layer-accent-01;
+		visibility: visible;
+		opacity: 1;
 	}
-	.properties-btn-resize {
-		transition: visibility $duration-moderate-01, opacity $duration-moderate-01;
-		opacity: 0;
-		visibility: hidden;
-		position: absolute;
-		top: 50%;
-		z-index: 1; // needs to sit on top of common-properties div
-		min-height: $properties-resize-button-size;
-		min-width: $properties-resize-button-size;
-		background-color: $layer-01;
-		border: 1px $border-strong-01 solid;
-		padding: 2px;
-		justify-content: center;
-		align-items: center;
-		&:hover {
-			background-color: $layer-accent-01;
-		}
-		svg {
-			fill: $icon-primary;
-			width: $spacing-05;
-			height: $spacing-05;
-		}
+	svg {
+		fill: $icon-primary;
+		width: $spacing-05;
+		height: $spacing-05;
 	}
 }
 
-
+.common-canvas .right-flyout-panel {
+	// Set the 'properties-btn-resize' visible when the 'properties-right-flyout' is hovered
+	aside:hover + button {
+		visibility: visible;
+		opacity: 1;
+	}
+}
 
 .properties-right-flyout > .properties-custom-container {
 	height: calc(100% - 65px - #{$properties-modal-buttons-height}); // Properties title - 65px