diff --git a/web/pgadmin/tools/datagrid/static/js/datagrid.js b/web/pgadmin/tools/datagrid/static/js/datagrid.js
index 36fd140a1..80ce35680 100644
--- a/web/pgadmin/tools/datagrid/static/js/datagrid.js
+++ b/web/pgadmin/tools/datagrid/static/js/datagrid.js
@@ -213,6 +213,19 @@ define('pgadmin.datagrid', [
         showQueryTool.showQueryTool(this, pgBrowser, alertify, url, aciTreeIdentifier, transId);
       },
 
+      resize_the_queryTool: function(){
+        var docker = this.docker(this._panel);
+        var dockerPos = docker.$container.offset();
+        var pos = this.$container.offset();
+        var width = this.$container.width();
+        var height = this.$container.height();
+
+        $(wcDocker).find('.wcIFrameFloating').css('top', pos.top - dockerPos.top);
+        $(wcDocker).find('.wcIFrameFloating').css('left', pos.left - dockerPos.left);
+        $(wcDocker).find('.wcIFrameFloating').css('width', width);
+        $(wcDocker).find('.wcIFrameFloating').css('height', height);
+      },
+
       launch_grid: function(trans_id, panel_url, is_query_tool, panel_title, sURL=null, sql_filter=null) {
 
         let queryToolForm = `
@@ -270,6 +283,20 @@ define('pgadmin.datagrid', [
             });
           });
 
+          queryToolPanel.on(wcDocker.EVENT.DETACHED, function() {
+            $(wcDocker).find('.wcIFrameFloating').attr({
+              style: 'z-index: 1200'
+            });
+          });
+
+          queryToolPanel.on(wcDocker.EVENT.ORDER_CHANGED, function() {
+            $(wcDocker).find('.wcIFrameFloating').attr({
+              style: 'z-index: 1200'
+            });
+          });
+
+          queryToolPanel.on(wcDocker.EVENT.ORDER_CHANGED, this.resize_the_queryTool);
+
           // Listen on the panelRename event.
           queryToolPanel.on(wcDocker.EVENT.RENAME, function(panel_data) {
             var temp_title = panel_data.$titleText[0].textContent;
diff --git a/web/pgadmin/tools/psql/static/js/psql_module.js b/web/pgadmin/tools/psql/static/js/psql_module.js
index 85bccb1a7..54b2d79c8 100644
--- a/web/pgadmin/tools/psql/static/js/psql_module.js
+++ b/web/pgadmin/tools/psql/static/js/psql_module.js
@@ -181,6 +181,20 @@ export function initialize(gettext, url_for, $, _, pgAdmin, csrfToken, Browser)
         var propertiesPanel = pgBrowser.docker.findPanels('properties');
         var psqlToolPanel = pgBrowser.docker.addPanel('frm_psqltool', wcDocker.DOCK.STACKED, propertiesPanel[0]);
 
+        psqlToolPanel.on(wcDocker.EVENT.DETACHED, function() {
+          $(wcDocker).find('.wcIFrameFloating').attr({
+            style: 'z-index: 1200'
+          });
+        });
+
+        psqlToolPanel.on(wcDocker.EVENT.ORDER_CHANGED, function() {
+          $(wcDocker).find('.wcIFrameFloating').attr({
+            style: 'z-index: 1200'
+          });
+        });
+
+        psqlToolPanel.on(wcDocker.EVENT.ORDER_CHANGED, this.resize_the_psql);
+
         // Set panel title and icon
         setPanelTitle(psqlToolPanel, panelTitle);
         psqlToolPanel.icon('fas fa-terminal psql-tab-style');
@@ -217,6 +231,18 @@ export function initialize(gettext, url_for, $, _, pgAdmin, csrfToken, Browser)
       }
 
     },
+    resize_the_psql: function(){
+      var docker = this.docker(this._panel);
+      var dockerPos = docker.$container.offset();
+      var pos = this.$container.offset();
+      var width = this.$container.width();
+      var height = this.$container.height();
+
+      $(wcDocker).find('.wcIFrameFloating').css('top', pos.top - dockerPos.top);
+      $(wcDocker).find('.wcIFrameFloating').css('left', pos.left - dockerPos.left);
+      $(wcDocker).find('.wcIFrameFloating').css('width', width);
+      $(wcDocker).find('.wcIFrameFloating').css('height', height);
+    },
     getPanelUrls: function(transId, panelTitle, parentData) {
       let openUrl = url_for('psql.panel', {
         trans_id: transId,