From e4b43e2df7cd4eeef99b0bbc8a8b3b1b33123ef4 Mon Sep 17 00:00:00 2001
From: Kiran Ashok <stepinfwd@gmail.com>
Date: Wed, 23 Mar 2022 13:50:35 +0530
Subject: [PATCH] [ 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 |  5 ++++-
 frontend/src/_styles/theme.scss             | 20 ++++++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx
index 81db0b99a6..78436a354b 100644
--- a/frontend/src/Editor/Inspector/Inspector.jsx
+++ b/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"
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 1156313911..77ade45695 100644
--- a/frontend/src/_styles/theme.scss
+++ b/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;