From 4c8a6a57910aed02d2d3f8cc8c93cb8f528bf535 Mon Sep 17 00:00:00 2001
From: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Date: Mon, 21 Jun 2021 08:52:46 +0300
Subject: [PATCH] fix

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
---
 .../components/layout/setting-layout.scss     | 21 +++++++++++--------
 .../components/layout/setting-layout.tsx      |  2 +-
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/layout/setting-layout.scss b/src/renderer/components/layout/setting-layout.scss
index 0c7eb700ba..198e7c9cb6 100644
--- a/src/renderer/components/layout/setting-layout.scss
+++ b/src/renderer/components/layout/setting-layout.scss
@@ -23,15 +23,6 @@
   --width: 75%;
   --nav-width: 180px;
   --nav-column-width: 30vw;
-
-  position: fixed !important; // allow to cover Hotbar
-  z-index: 13;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  height: unset;
-  background-color: var(--settingsBackground);
   width: 100%;
   height: 100%;
   display: grid !important;
@@ -49,6 +40,18 @@
     }
   }
 
+  // covers whole app view area
+  &.showOnTop {
+    position: fixed !important; // allow to cover ClustersMenu
+    z-index: 13;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    height: unset;
+    background-color: var(--settingsBackground);
+  }
+
   > .sidebarRegion {
     display: flex;
     justify-content: flex-end;
diff --git a/src/renderer/components/layout/setting-layout.tsx b/src/renderer/components/layout/setting-layout.tsx
index 53e54e07ac..45912f262c 100644
--- a/src/renderer/components/layout/setting-layout.tsx
+++ b/src/renderer/components/layout/setting-layout.tsx
@@ -81,7 +81,7 @@ export class SettingLayout extends React.Component<SettingLayoutProps> {
       contentClass, provideBackButtonNavigation,
       contentGaps, navigation, children, ...elemProps
     } = this.props;
-    const className = cssNames("SettingLayout", { showNavigation: navigation }, this.props.className);
+    const className = cssNames("SettingLayout", "showOnTop", { showNavigation: navigation }, this.props.className);
 
     return (
       <div {...elemProps} className={className}>