fix styles & missing z-index

packages/app/src/components/Layout/header/index.jsx

@@ -39,6 +39,9 @@ export default (props) => {
                     WebkitTransform: `translateY(-${y}px)`,
                     transform: `translateY(-${y}px)`,
                 }}
+            >
+                <div
+                    className="page_header"
                 >
                     {
                         render?.component && React.cloneElement(
@@ -47,6 +50,7 @@ export default (props) => {
                         )
                     }
                 </div>
+            </div>
         }}
     </Motion>
 }

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,11 +11,15 @@
 
     width: 100%;
 
-    margin-bottom: 20px;
+    .page_header {
+        display: block;
+        margin: 10px 0 20px 0;
+
         padding: 5px;
 
-    backdrop-filter: blur(10px);
+        gap: 10px;
 
+        backdrop-filter: blur(10px);
         background-color: rgba(var(--background-color-accent-values), 0.8);
 
         border-radius: 12px;
@@ -25,10 +27,13 @@
 
         overflow: hidden;
 
+        transition: all 150ms ease-in-out;
+    }
+
     &.hidden {
         opacity: 0;
         height: 0;
         padding: 0;
-        margin: 0;
+        margin: 10px 0;
     }
 }

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);