Merge pull request #12331 from ToolJet/fix/query-panel-resizing

Fixed query panel resizing causing black bars issue
This commit is contained in:
Johnson Cherian 2025-03-21 13:56:32 +05:30 committed by GitHub
commit 0ad8b636d8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 12 additions and 4 deletions

View file

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

View file

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

View file

@ -701,6 +701,7 @@
.sidebar-h-100-popover {
position: relative;
height: 100vh;
overflow-y:scroll !important;
margin-top: 0px;
border-radius: 0px !important;