Fixed accessibility issue where few dialogs are not rendering properly

when we zoomed in browser window 200% and screen resolution is low.

Fixes #5662

docs/en_US/release_notes_4_24.rst

@@ -33,4 +33,5 @@ Bug fixes
 | `Issue #5629 <https://redmine.postgresql.org/issues/5629>`_ -  Fixed an issue where the user is able to edit properties when some of the collection nodes are selected.
 | `Issue #5630 <https://redmine.postgresql.org/issues/5630>`_ -  Fixed an issue where installation of pgadmin4 not working on 32-bit Windows.
 | `Issue #5631 <https://redmine.postgresql.org/issues/5631>`_ -  Fixed 'cant execute empty query' issue when remove the value of 'USING' or 'WITH CHECK' option of RLS Policy.
-| `Issue #5633 <https://redmine.postgresql.org/issues/5633>`_ -  Ensure that create RLS Policy menu should not be visible for catalog objects.
+| `Issue #5633 <https://redmine.postgresql.org/issues/5633>`_ -  Ensure that create RLS Policy menu should not be visible for catalog objects.
+| `Issue #5662 <https://redmine.postgresql.org/issues/5662>`_ -  Fixed accessibility issue where few dialogs are not rendering properly when we zoomed in browser window 200% and screen resolution is low.

web/pgadmin/browser/static/js/browser.js

@@ -171,12 +171,41 @@ define('pgadmin.browser', [
       md: 700,
       lg: 900,
       default: 500,
+      // If you change above values then make sure to update
+      // calc method logic
+      calc: () => {
+        let iw = window.innerWidth;
+        if (iw > pgAdmin.Browser.stdW.lg)
+          return pgAdmin.Browser.stdW.lg;
+        else if (iw > pgAdmin.Browser.stdW.md)
+          return pgAdmin.Browser.stdW.md;
+        else if (iw > pgAdmin.Browser.stdW.sm)
+          return pgAdmin.Browser.stdW.sm;
+        else
+          // if avilable screen resolution is still
+          // less then return the width value as it
+          return iw;
+      },
     },
     stdH: {
       sm: 200,
       md: 400,
       lg: 550,
       default: 550,
+      // If you change above values then make sure to update
+      // calc method logic
+      calc: () => {
+        // We are excluding sm as it is too small for dialog
+        let ih = window.innerHeight;
+        if (ih > pgAdmin.Browser.stdH.lg)
+          return pgAdmin.Browser.stdH.lg;
+        else if (ih > pgAdmin.Browser.stdH.md)
+          return pgAdmin.Browser.stdH.md;
+        else
+          // if avilable screen resolution is still
+          // less then return the height value as it
+          return ih;
+      },
     },
     // Default panels
     panels: {

web/pgadmin/misc/file_manager/static/js/file_manager.js

@@ -37,10 +37,12 @@ define('misc.file_manager', [
     },
     // Call dialogs subject to dialog_type param
     show_dialog: function(params) {
+      let dialogWidth = pgAdmin.Browser.stdW.calc();
+      let dialogHeight = pgAdmin.Browser.stdH.calc();
       if (params.dialog_type == 'create_file') {
-        Alertify.createModeDlg(params).resizeTo(pgAdmin.Browser.stdW.md,pgAdmin.Browser.stdH.lg);
+        Alertify.createModeDlg(params).resizeTo(dialogWidth, dialogHeight);
       } else {
-        Alertify.fileSelectionDlg(params).resizeTo(pgAdmin.Browser.stdW.md,pgAdmin.Browser.stdH.lg);
+        Alertify.fileSelectionDlg(params).resizeTo(dialogWidth, dialogHeight);
       }
     },
   };

web/pgadmin/misc/file_manager/static/js/select_dialogue.js

@@ -29,7 +29,6 @@ module.exports =  Alertify.dialog('fileSelectionDlg', function() {
       this.set('title', params['dialog_title']);
       this.params = JSON.stringify(params);
 
-      this.elements.dialog.style.minWidth = '630px';
       this.show();
 
     },

web/pgadmin/preferences/static/js/preferences.js

@@ -512,7 +512,7 @@ define('pgadmin.preferences', [
 
     },
     show: function() {
-      Alertify.preferencesDlg(true).resizeTo(pgAdmin.Browser.stdW.lg,pgAdmin.Browser.stdH.lg);
+      Alertify.preferencesDlg(true).resizeTo(pgAdmin.Browser.stdW.calc(),pgAdmin.Browser.stdH.calc());
     },
   };
 

web/pgadmin/tools/backup/static/js/backup.js

@@ -650,7 +650,7 @@ define([
         alertify,
         BackupModel
       );
-      dialog.draw(action, item, {'globals': true}, pgBrowser.stdW.md, pgBrowser.stdH.md);
+      dialog.draw(action, item, {'globals': true}, pgBrowser.stdW.calc(), pgBrowser.stdH.calc());
     },
     start_backup_server: function(action, item) {
       let dialog = new globalBackupDialog.BackupDialog(
@@ -659,7 +659,7 @@ define([
         alertify,
         BackupObjectModel
       );
-      dialog.draw(action, item, {'server': true}, pgBrowser.stdW.md, pgBrowser.stdH.md);
+      dialog.draw(action, item, {'server': true}, pgBrowser.stdW.calc(), pgBrowser.stdH.calc());
     },
     // Callback to draw Backup Dialog for objects
     backup_objects: function(action, treeItem) {
@@ -669,7 +669,7 @@ define([
         alertify,
         BackupObjectModel
       );
-      dialog.draw(action, treeItem, null, pgBrowser.stdW.md, pgBrowser.stdH.md);
+      dialog.draw(action, treeItem, null, pgBrowser.stdW.calc(), pgBrowser.stdH.calc());
     },
   };
   return pgBrowser.Backup;

web/pgadmin/tools/restore/static/js/restore.js

@@ -424,7 +424,7 @@ define('tools.restore', [
       let dialog = new restoreDialog.RestoreDialog(
         pgBrowser, $, alertify, RestoreObjectModel
       );
-      dialog.draw(action, treeItem, pgBrowser.stdW.md, pgBrowser.stdH.md);
+      dialog.draw(action, treeItem, pgBrowser.stdW.calc(), pgBrowser.stdH.calc());
     },
   };
   return pgBrowser.Restore;

web/pgadmin/tools/search_objects/static/js/search_objects.js

@@ -82,7 +82,7 @@ define([
         alertify,
         {},
       );
-      dialog.draw(action, item, {}, pgBrowser.stdW.md, pgBrowser.stdH.lg);
+      dialog.draw(action, item, {}, pgBrowser.stdW.calc(), pgBrowser.stdH.calc());
     },
   };
 

web/regression/javascript/file_manager/file_manager_specs.js

@@ -23,12 +23,32 @@ describe('fileSelectDialog', function () {
       md: 700,
       lg: 900,
       default: 500,
+      calc: () => {
+        let iw = window.innerWidth;
+        if (iw > pgAdmin.Browser.stdW.lg)
+          return pgAdmin.Browser.stdW.lg;
+        else if (iw > pgAdmin.Browser.stdW.md)
+          return pgAdmin.Browser.stdW.md;
+        else if (iw > pgAdmin.Browser.stdW.sm)
+          return pgAdmin.Browser.stdW.sm;
+        else
+          return iw;
+      },
     },
     stdH: {
       sm: 200,
       md: 400,
       lg: 550,
       default: 550,
+      calc: () => {
+        let ih = window.innerHeight;
+        if (ih > pgAdmin.Browser.stdH.lg)
+          return pgAdmin.Browser.stdH.lg;
+        else if (ih > pgAdmin.Browser.stdH.md)
+          return pgAdmin.Browser.stdH.md;
+        else
+          return ih;
+      },
     },
   };