diff --git a/src/views/htmlcontent/src/js/components/app.component.ts b/src/views/htmlcontent/src/js/components/app.component.ts
index e3e0779cf..ae3adfcc6 100644
--- a/src/views/htmlcontent/src/js/components/app.component.ts
+++ b/src/views/htmlcontent/src/js/components/app.component.ts
@@ -138,6 +138,7 @@ export class AppComponent implements OnInit, AfterViewChecked {
     private selectionModel = 'DragRowSelectionModel';
     private slickgridPlugins = ['AutoColumnSize'];
     private _rowHeight = 29;
+    private _resultsPaneBoundary = 2;
     private _defaultNumShowingRows = 8;
     private Constants = Constants;
     private Utils = Utils;
@@ -446,10 +447,12 @@ export class AppComponent implements OnInit, AfterViewChecked {
      * Toggle the messages pane
      */
     private toggleMessagesPane(): void {
-        this._messagesPaneHeight = $('#messages').get(0).clientHeight;
         this.messageActive = !this.messageActive;
+        this.cd.detectChanges();
         if (this.messageActive) {
-            $('.horzBox').get(0).style.height = `${this._messagesPaneHeight}px`;
+            let scrollableHeight = $('.results.vertBox.scrollable').get(0).clientHeight;
+            $('.horzBox').get(0).style.height = `${scrollableHeight - this._resultsPaneBoundary}px`;
+            this.resizeGrids();
         }
     }
 
@@ -731,7 +734,6 @@ export class AppComponent implements OnInit, AfterViewChecked {
             self.resizing = true;
             self.resizeHandleTop = e.pageY;
             this._messagesPaneHeight = $('#messages').get(0).clientHeight;
-            $('.horzBox').get(0).style.height = `${this._messagesPaneHeight}px`;
             return true;
         });
 
@@ -743,7 +745,8 @@ export class AppComponent implements OnInit, AfterViewChecked {
             self.resizing = false;
             // redefine the min size for the messages based on the final position
             $messagePane.css('min-height', $(window).height() - (e.pageY + 22));
-            $('.horzBox').get(0).style.height = `${this._messagesPaneHeight}px`;
+            let scrollableHeight = $('.results.vertBox.scrollable').get(0).clientHeight;
+            $('.horzBox').get(0).style.height = `${scrollableHeight}px`;
             self.cd.detectChanges();
             self.resizeGrids();
         });