Properly size the SQL Editor gutter as the width of the line numbers increases. Fixes #1780

web/pgadmin/static/css/overrides.css

@@ -52,8 +52,9 @@ iframe {
 }
 
 /* Ensure the codemirror editor displays full height gutters when resized */
-.CodeMirror, .CodeMirror-gutters {
+.CodeMirror, .CodeMirror-gutter {
     height: 100% !important;
+    min-height: 100% !important;
 }
 
 /* Padding for the treeview */
@@ -268,6 +269,7 @@ iframe {
 .pgadmin-controls.SQL {
   padding-right: 3px;
   padding-left: 1px;
+  height: 100%;
 }
 .pgadmin-controls > textarea.form-control,
 .pgadmin-controls > textarea.form-control[disabled] {
@@ -916,11 +918,13 @@ td.edit-cell.editable.sortable.renderable.editor {
 
 .tab-pane.SQL {
   padding: 0px 7px 0px 0px;
+  height: 100%;
 }
 
 .pgadmin-control-group.sql {
   margin: 0px;
   padding: 0px;
+  height: 100%;
 }
 
 .nav-tabs{
@@ -996,10 +1000,6 @@ ul.nav.nav-tabs {
   background-position: 0px 2px;
 }
 
-.pgadmin-controls.SQL>.CodeMirror {
-  height: 500px !important;
-}
-
 /* This rule will stop Chrome apply highlighting to elements such as DIV's used as modals */ 
 *:focus {
   outline: none;

web/pgadmin/static/css/pgadmin.css

@@ -718,6 +718,7 @@ lgg-el-container[el=md] .pg-el-lg-8,
 
 .pg-el-container ul.tab-content {
   min-height: calc(100% - 10px);
+  height: 100%;
 }
 
 .pgadmin-control-group {

web/pgadmin/static/js/backform.pgadmin.js

@@ -1456,13 +1456,6 @@
           this.sqlCtrl.setValue('-- ' + window.pgAdmin.Browser.messages.SQL_NO_CHANGE);
         }
         this.sqlCtrl.refresh.apply(this.sqlCtrl);
-
-        this.$el.find('.CodeMirror').css(
-            'cssText',
-            'height: ' + (
-              this.$el.closest('.tab-content').height() + 8
-              ) + 'px !important;'
-            );
       }
     },
     onPanelResized: function(o) {

web/pgadmin/tools/sqleditor/static/css/sqleditor.css

@@ -157,24 +157,13 @@
 
 .CodeMirror, #editor-panel .CodeMirror-gutters {
     min-height: 100%;
+    height: 100%;
 }
 
-/* Changes specific to output panel of query tool */
-#output-panel, #output-panel .CodeMirror, #output-panel .CodeMirror-gutters {
+#output-panel {
   height: 100% !important;
 }
 
-#output-panel .CodeMirror-gutter-wrapper {
-  width: 43px;
-  height: 22px;
-  border-right: 1px solid #ddd !important;
-  background: #f7f7f7 !important;
-}
-
-.CodeMirror-foldgutter {
-  width: .9em;
-}
-
 .CodeMirror-foldgutter-open,
 .CodeMirror-foldgutter-folded {
   cursor: pointer;
@@ -431,8 +420,8 @@ input.editor-checkbox {
   Ref: https://github.com/mleibman/SlickGrid/issues/742
 */
 .slickgrid, .slickgrid *, .slick-header-column {
-        box-sizing: content-box;
-        -moz-box-sizing: content-box;
-        -webkit-box-sizing: content-box;
-        -ms-box-sizing: content-box;
-}
+  box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  -ms-box-sizing: content-box;
+}