Fixed query panel resizing causing black bars issue

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;

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',

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;