Fix: closing workspace menu after clicking on iframe (#2349)

src/renderer/components/cluster-manager/cluster-manager.scss

@@ -11,10 +11,6 @@
     grid-area: main;
     position: relative;
     display: flex;
-
-    > * {
-      z-index: 1;
-    }
   }
 
   .ClustersMenu {
@@ -33,6 +29,7 @@
     bottom: 0;
     display: flex;
     background-color: $mainBackground;
+    z-index: 1;
 
     iframe {
       flex: 1;

src/renderer/components/cluster-manager/clusters-menu.scss

@@ -61,3 +61,7 @@
     }
   }
 }
+
+.Menu.WorkspaceMenu {
+  z-index: 2; // Place behind Preferences, Extension pages etc...
+}

src/renderer/components/layout/page-layout.scss

@@ -31,7 +31,7 @@
   // covers whole app view area
   &.showOnTop {
     position: fixed !important; // allow to cover ClustersMenu
-    z-index: 1;
+    z-index: 3;
     left: 0;
     top: 0;
     right: 0;

src/renderer/components/menu/menu.tsx

@@ -82,6 +82,7 @@ export class Menu extends React.Component<MenuProps, State> {
     window.addEventListener("click", this.onClickOutside, true);
     window.addEventListener("scroll", this.onScrollOutside, true);
     window.addEventListener("contextmenu", this.onContextMenu, true);
+    window.addEventListener("blur", this.onBlur, true);
   }
 
   componentWillUnmount() {
@@ -232,6 +233,12 @@ export class Menu extends React.Component<MenuProps, State> {
     }
   }
 
+  onBlur() {
+    if (document.activeElement?.tagName == "IFRAME") {
+      this.close();
+    }
+  }
+
   protected bindRef(elem: HTMLUListElement) {
     this.elem = elem;
   }