fix styles & missing z-index

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

@@ -40,12 +40,16 @@ export default (props) => {
                     transform: `translateY(-${y}px)`,
                 }}
             >
-                {
+                <div
-                    render?.component && React.cloneElement(
+                    className="page_header"
-                        render?.component,
+                >
-                        render?.options?.props ?? {}
+                    {
-                    )
+                        render?.component && React.cloneElement(
-                }
+                            render?.component,
+                            render?.options?.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,22 +11,29 @@
 
     width: 100%;
 
-    margin-bottom: 20px;
+    .page_header {
-    padding: 5px;
+        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;
+        backdrop-filter: blur(10px);
-    border: 1px solid var(--border-color);
+        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;
     }
 }

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