From 6952cd2292e79d36b127f247ec92949f6f70e598 Mon Sep 17 00:00:00 2001
From: Shaurya Sharma <shaurya064@gmail.com>
Date: Sun, 2 Mar 2025 00:57:01 +0530
Subject: [PATCH] Fixed query panel resizing causing black bars issue

---
 .../src/AppBuilder/LeftSidebar/LeftSidebar.jsx     | 14 ++++++++++----
 frontend/src/AppBuilder/QueryPanel/QueryPanel.jsx  |  1 +
 frontend/src/_styles/left-sidebar.scss             |  1 +
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx b/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx
index 4146c4a28e..aaf12714b9 100644
--- a/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/LeftSidebar.jsx
@@ -34,6 +34,7 @@ export const BaseLeftSidebar = ({
     resetUnreadErrorCount,
     toggleLeftSidebar,
     isSidebarOpen,
+    isDraggingQueryPane,
   ] = useStore(
     (state) => [
       state.isLeftSideBarPinned,
@@ -46,6 +47,7 @@ export const BaseLeftSidebar = ({
       state.debugger.resetUnreadErrorCount,
       state.toggleLeftSidebar,
       state.isSidebarOpen,
+      state.queryPanel.isDraggingQueryPane,
     ],
     shallow
   );
@@ -68,11 +70,15 @@ export const BaseLeftSidebar = ({
   };
 
   useEffect(() => {
-    setPopoverContentHeight(
-      ((window.innerHeight - (queryPanelHeight == 0 ? 40 : queryPanelHeight) - 45) / window.innerHeight) * 100
-    );
+    if (!isDraggingQueryPane) {
+      setPopoverContentHeight(
+        ((window.innerHeight - (queryPanelHeight == 0 ? 40 : queryPanelHeight) - 45) / window.innerHeight) * 100
+      );
+    } else {
+      setPopoverContentHeight(100);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [queryPanelHeight]);
+  }, [queryPanelHeight, isDraggingQueryPane]);
 
   const renderPopoverContent = () => {
     if (selectedSidebarItem === null || !isSidebarOpen) return null;
diff --git a/frontend/src/AppBuilder/QueryPanel/QueryPanel.jsx b/frontend/src/AppBuilder/QueryPanel/QueryPanel.jsx
index 827efe6d33..ea8623b0c1 100644
--- a/frontend/src/AppBuilder/QueryPanel/QueryPanel.jsx
+++ b/frontend/src/AppBuilder/QueryPanel/QueryPanel.jsx
@@ -185,6 +185,7 @@ export const QueryPanel = ({ darkMode }) => {
         id="query-manager"
         style={{
           height: `calc(100% - ${isExpanded ? height : 100}%)`,
+          maxHeight: '93.5%',
           cursor: isDraggingQueryPane || isTopOfQueryPanel ? 'row-resize' : 'default',
           ...(!isExpanded && {
             border: 'none',
diff --git a/frontend/src/_styles/left-sidebar.scss b/frontend/src/_styles/left-sidebar.scss
index 3f68e1486b..82b6762b54 100644
--- a/frontend/src/_styles/left-sidebar.scss
+++ b/frontend/src/_styles/left-sidebar.scss
@@ -701,6 +701,7 @@
 .sidebar-h-100-popover {
   position: relative;
   height: 100vh;
+  overflow-y:scroll !important;
   margin-top: 0px;
   border-radius: 0px !important;