From 3102a8d24b42be97a34b0fddf9ff773cd815d558 Mon Sep 17 00:00:00 2001
From: Ashesh Vashi <ashesh.vashi@enterprisedb.com>
Date: Wed, 1 Jul 2020 11:49:39 +0530
Subject: [PATCH] Fix the dialog size when zoom level is changed of the
 browser.

The screen.width & screen.height does not reflect the values of the
height and width respectively when zoom level is changed for the
browser. It is better to review the calculated height and width based
on the window.innerHeight and window.innerWidth and re-evaluate them.
---
 web/pgadmin/browser/static/js/node.js         | 25 ++++++++++++++++---
 .../static/scss/_webcabin.pgadmin.scss        |  2 ++
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/web/pgadmin/browser/static/js/node.js b/web/pgadmin/browser/static/js/node.js
index c42d24bce..5c3f01425 100644
--- a/web/pgadmin/browser/static/js/node.js
+++ b/web/pgadmin/browser/static/js/node.js
@@ -598,9 +598,12 @@ define('pgadmin.browser.node', [
 
             let w, h, x, y;
             if(screen.width < 800) {
-              w= pgAdmin.toPx(el, '95%', 'width', true);
+              w = pgAdmin.toPx(el, '95%', 'width', true);
             } else {
-              w= pgAdmin.toPx(el, self.width || pgBrowser.stdW.default+'px', 'width', true);
+              w = pgAdmin.toPx(
+                el, (self.width || pgBrowser.stdW.default) + 'px',
+                'width', true
+              );
 
               /* Fit to standard sizes */
               if(w <= pgBrowser.stdW.sm) {
@@ -617,7 +620,10 @@ define('pgadmin.browser.node', [
             if(screen.height < 600) {
               h = pgAdmin.toPx(el, '95%', 'height', true);
             } else {
-              h = pgAdmin.toPx(el, self.height || pgBrowser.stdH.default+'px', 'height', true);
+              h = pgAdmin.toPx(
+                el, (self.height || pgBrowser.stdH.default) + 'px',
+                'height', true
+              );
 
               /* Fit to standard sizes */
               if(h <= pgBrowser.stdH.sm) {
@@ -634,6 +640,18 @@ define('pgadmin.browser.node', [
             x = (b.offsetWidth - w) / 2;
             y = (b.offsetHeight - h) / 4;
 
+            // If the screen resolution is higher, but - it is zoomed, dialog
+            // may be go out of window, and will not be accessible through the
+            // keyboard.
+            if (w > window.innerWidth) {
+              x = 0;
+              w = window.innerWidth;
+            }
+            if (h > window.innerHeight) {
+              y = 0;
+              h = window.innerHeight;
+            }
+
             var p = pgBrowser.docker.addPanel(
               'node_props', wcDocker.DOCK.FLOAT, undefined, {
                 w: w + 'px',
@@ -644,7 +662,6 @@ define('pgadmin.browser.node', [
             );
 
             b.removeChild(el);
-            // delete(el);
 
             return p;
           };
diff --git a/web/pgadmin/static/scss/_webcabin.pgadmin.scss b/web/pgadmin/static/scss/_webcabin.pgadmin.scss
index ca806785a..b59e26ce7 100644
--- a/web/pgadmin/static/scss/_webcabin.pgadmin.scss
+++ b/web/pgadmin/static/scss/_webcabin.pgadmin.scss
@@ -90,6 +90,8 @@
   &.wcFrame, & .wcPanelBackground {
     border-bottom-left-radius: $card-border-radius;
     border-bottom-right-radius: $card-border-radius;
+    max-width: 100%;
+    max-height: 100%;
   }
 
   & .pg-panel-content {