From ca90786e929fb20567ac4d4aa1ca4acf2efcd3da Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Tue, 10 Oct 2023 12:15:22 +0000
Subject: [PATCH] fix styles & missing `z-index`

---
 .../src/components/Layout/header/index.jsx    | 16 +++++++-----
 .../src/components/Layout/header/index.less   | 25 +++++++++++--------
 .../src/components/Layout/toolsBar/index.less |  4 ++-
 3 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/packages/app/src/components/Layout/header/index.jsx b/packages/app/src/components/Layout/header/index.jsx
index a7a6af26..b9bd82ac 100755
--- a/packages/app/src/components/Layout/header/index.jsx
+++ b/packages/app/src/components/Layout/header/index.jsx
@@ -40,12 +40,16 @@ export default (props) => {
                     transform: `translateY(-${y}px)`,
                 }}
             >
-                {
-                    render?.component && React.cloneElement(
-                        render?.component,
-                        render?.options?.props ?? {}
-                    )
-                }
+                <div
+                    className="page_header"
+                >
+                    {
+                        render?.component && React.cloneElement(
+                            render?.component,
+                            render?.options?.props ?? {}
+                        )
+                    }
+                </div>
             </div>
         }}
     </Motion>
diff --git a/packages/app/src/components/Layout/header/index.less b/packages/app/src/components/Layout/header/index.less
index 61fe0fb0..1feaf006 100755
--- a/packages/app/src/components/Layout/header/index.less
+++ b/packages/app/src/components/Layout/header/index.less
@@ -2,8 +2,6 @@
     display: flex;
     flex-direction: column;
 
-    gap: 10px;
-
     position: sticky;
 
     z-index: 100;
@@ -13,22 +11,29 @@
 
     width: 100%;
 
-    margin-bottom: 20px;
-    padding: 5px;
+    .page_header {
+        display: block;
+        margin: 10px 0 20px 0;
 
-    backdrop-filter: blur(10px);
+        padding: 5px;
 
-    background-color: rgba(var(--background-color-accent-values), 0.8);
+        gap: 10px;
 
-    border-radius: 12px;
-    border: 1px solid var(--border-color);
+        backdrop-filter: blur(10px);
+        background-color: rgba(var(--background-color-accent-values), 0.8);
 
-    overflow: hidden;
+        border-radius: 12px;
+        border: 1px solid var(--border-color);
+
+        overflow: hidden;
+
+        transition: all 150ms ease-in-out;
+    }
 
     &.hidden {
         opacity: 0;
         height: 0;
         padding: 0;
-        margin: 0;
+        margin: 10px 0;
     }
 }
\ No newline at end of file
diff --git a/packages/app/src/components/Layout/toolsBar/index.less b/packages/app/src/components/Layout/toolsBar/index.less
index 6be16664..51d1aacb 100644
--- a/packages/app/src/components/Layout/toolsBar/index.less
+++ b/packages/app/src/components/Layout/toolsBar/index.less
@@ -13,6 +13,8 @@
     height: 100dvh;
 
     padding: 10px;
+
+    z-index: 150;
 }
 
 .tools-bar {
@@ -65,7 +67,7 @@
 
             margin-bottom: 10px;
 
-            z-index: 50;
+            z-index: 150;
 
             -webkit-box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 var(--shadow-color);
             -moz-box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 var(--shadow-color);