[ Enhancement ] :: Making fixed headers for query panel and properties/styles sidebar (#2601)

* fixing query panel header

* fixing right siedebar header : making it fixed

* fixing bug in higher resolution

* fixing position

* updating pr changes : dark mode color issues

frontend/src/Editor/Inspector/Inspector.jsx

@@ -358,7 +358,10 @@ export const Inspector = ({
         </Tabs>
       </div>
 
-      <div className="close-icon" style={{ height: darkMode ? tabHeight + 1 : tabHeight }}>
+      <div
+        className="close-icon"
+        style={{ backgroundColor: darkMode && '#232e3c', height: darkMode ? tabHeight + 1 : tabHeight }}
+      >
         <div className="svg-wrapper">
           <svg
             width="20"

frontend/src/_styles/theme.scss

@@ -213,6 +213,7 @@ button {
 
     .header {
       --tblr-gutter-x: 0rem;
+      position: sticky; top: 0;
     }
 
     .nav-header {
@@ -3839,6 +3840,7 @@ input[type="text"] {
   }
 }
 .tabs-inspector {
+  position: sticky; top: 0;
   .nav-item {
     width: 50%;
   }
@@ -3863,16 +3865,25 @@ input[type="text"] {
     border-bottom: 1px solid $primary !important;
   }
 }
-
+.tabs-inspector
+{
+  z-index: 2;
+  background: white;
+  &.dark {
+    @extend .bg-dark;
+  }
+}
 .close-icon {
-  position: absolute;
-  top: 0;
+  position: fixed;
+  top: 45px;
   right: 0;
-  width: 20%;
+  width: 60px;
   height: 22;
   border-bottom: 1px solid #e7eaef;
   display: flex;
   align-items: center;
+  background-color: white;
+  z-index: 2;
 
   .svg-wrapper {
     width: 100%;
@@ -4517,6 +4528,7 @@ input[type="text"] {
     background-color: transparent !important;
   }
 }
+
 .comment-card-wrapper {
   border-top: 0.5px solid #e1e1e1 !important;
   margin-top: -1px !important;