diff --git a/web/pgadmin/static/js/slickgrid/editors.js b/web/pgadmin/static/js/slickgrid/editors.js
index e2e6cd2c9..4167b29b5 100644
--- a/web/pgadmin/static/js/slickgrid/editors.js
+++ b/web/pgadmin/static/js/slickgrid/editors.js
@@ -327,6 +327,12 @@ import Alertify from 'pgadmin.alertifyjs';
       }
     };
 
+    this.resizeJsoneditorObserver = new ResizeObserver(() => {
+      if ($editor){
+        $editor.resize();
+      }
+    });
+
     this.save = function() {
       args.commitChanges();
     };
@@ -352,6 +358,7 @@ import Alertify from 'pgadmin.alertifyjs';
     };
 
     this.destroy = function() {
+      this.resizeJsoneditorObserver.unobserve(document.getElementById('pg-json-editor'));
       $editor.destroy();
       $wrapper.remove();
     };
@@ -408,6 +415,7 @@ import Alertify from 'pgadmin.alertifyjs';
           throw(error);
         }, 'jsoneditorchunk');
       }
+      this.resizeJsoneditorObserver.observe(document.getElementById('pg-json-editor'));
     };
 
     this.serializeValue = function() {
@@ -641,6 +649,7 @@ import Alertify from 'pgadmin.alertifyjs';
     };
 
     this.destroy = function() {
+      this.resizeJsoneditorObserver.unobserve(document.getElementById('pg-json-editor'));
       $editor.destroy();
       $wrapper.remove();
     };
@@ -649,6 +658,13 @@ import Alertify from 'pgadmin.alertifyjs';
       $editor.focus();
     };
 
+    // listen to resize event for json editor
+    this.resizeJsoneditorObserver = new ResizeObserver(() => {
+      if ($editor){
+        $editor.resize();
+      }
+    });
+
     this.loadValue = function(item) {
       var data = defaultValue = item[args.column.field];
       tmpdata = data;
@@ -689,6 +705,7 @@ import Alertify from 'pgadmin.alertifyjs';
       }, function(error){
         throw(error);
       }, 'jsoneditorchunk');
+      this.resizeJsoneditorObserver.observe(document.getElementById('pg-json-editor'));
     };
 
     this.serializeValue = function() {
diff --git a/web/pgadmin/static/scss/_jsoneditor.overrides.scss b/web/pgadmin/static/scss/_jsoneditor.overrides.scss
index 93c1d1feb..4c27e5b3a 100644
--- a/web/pgadmin/static/scss/_jsoneditor.overrides.scss
+++ b/web/pgadmin/static/scss/_jsoneditor.overrides.scss
@@ -230,7 +230,9 @@ div.jsoneditor td.jsoneditor-tree {
 }
 
 pre.jsoneditor-preview{
- background-color: $color-gray-lighter !important;
+  background-color: $color-gray-lighter !important;
+  opacity: 0.8;
+  color: $color-fg;
 }