#2270 Canvas palette not loading/displayed in Safari browser (#2278)

Signed-off-by: CTomlyn <[email protected]>
elyra-ai · Dec 17, 2024 · 79db419 · 79db419
1 parent 497aa4b
commit 79db419
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/canvas_modules/common-canvas/src/palette/palette-flyout-content.jsx b/canvas_modules/common-canvas/src/palette/palette-flyout-content.jsx
@@ -145,8 +145,11 @@ class PaletteFlyoutContent extends React.Component {
 			? this.props.paletteHeader
 			: null;
 
+		let className = "palette-flyout-content";
+		className += paletteHeader ? " with-palette-header" : "";
+
 		return (
-			<div className="palette-flyout-content">
+			<div className={className}>
 				{contentSearch}
 				{paletteHeader}
 				{contentCategories}

diff --git a/canvas_modules/common-canvas/src/palette/palette.scss b/canvas_modules/common-canvas/src/palette/palette.scss
@@ -57,11 +57,17 @@ $palette-dialog-list-item-height: 46px;
 	height: 100%;
 }
 
+// Overrides the grid-template-rows for when a palette header object is
+// included. (This fixes a problem specifically on Safari.)
+.palette-flyout-content.with-palette-header {
+	grid-template-rows: $palette-search-container-height auto 1fr;
+}
+
 .palette-flyout-content {
 	position: absolute; // Needed to allow the scroll of categories/nodes to work.
 	height: 100%;
 	display: grid;
-	grid-template-rows: $palette-search-container-height auto 1fr;
+	grid-template-rows: $palette-search-container-height 1fr;
 	// grid-template-columns is set based on narrow or open palette
 
 	.palette-scroll {