elyra-ai#2106 Fix node editor resize button (elyra-ai#2107)

Signed-off-by: Carita Ou <[email protected]>
srikant-ch5 · Aug 15, 2024 · 23e4ada · 23e4ada
1 parent 8483035
commit 23e4ada
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/canvas_modules/common-canvas/package.json b/canvas_modules/common-canvas/package.json
@@ -53,12 +53,12 @@
     "uuid": "^8.3.0"
   },
   "devDependencies": {
-    "@babel/core": "7.11.6",
-    "@babel/plugin-proposal-class-properties": "7.10.4",
-    "@babel/plugin-proposal-export-default-from": "7.16.7",
-    "@babel/plugin-transform-runtime": "7.11.5",
-    "@babel/preset-env": "7.11.5",
-    "@babel/preset-react": "7.10.4",
+    "@babel/core": "7.25.2",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-proposal-export-default-from": "7.24.7",
+    "@babel/plugin-transform-runtime": "7.24.7",
+    "@babel/preset-env": "7.25.3",
+    "@babel/preset-react": "7.24.7",
     "@carbon/react": "1.62.0-rc.0",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "21.0.1",

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
@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16,6 +16,7 @@
 
 @import "./properties-main-widths.scss";
 $properties-modal-buttons-height: $spacing-10;
+$properties-resize-button-size: $spacing-06;
 
 .properties-right-flyout {
 	// Set the font explicitly to 14px to shrink them across the entire properties editor
@@ -30,15 +31,27 @@ $properties-modal-buttons-height: $spacing-10;
 
 	&.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));
+		}
 	}
 	&:hover {
 		.properties-btn-resize {
@@ -52,21 +65,21 @@ $properties-modal-buttons-height: $spacing-10;
 		visibility: hidden;
 		position: absolute;
 		top: 50%;
-		left: -13px;
 		z-index: 1; // needs to sit on top of common-properties div
-		min-height: 24px;
-		min-width: 24px;
+		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: 16px;
-			height: 16px;
+			width: $spacing-05;
+			height: $spacing-05;
 		}
 	}
 }