Update the height logic to include 5px height of draggable bar to avoid scroll

AlmToolkit/AlmToolkit/html-resources/src/app/codeeditor/codeeditor.component.css

@@ -1,8 +1,8 @@
 #code-editor-container {
-  height: 300px; /*Addded temporarily to test the height of the code editor*/
+  height: 100%;
 }
 
-#code-editor-section{
-height: 100px; /*Addded temporarily to test the height of the code editor*/
-width:100%;
+#code-editor-section {
+  height: 100%;
+  width: 100%;
 }

AlmToolkit/AlmToolkit/html-resources/src/app/codeeditor/codeeditor.component.ts

@@ -12,7 +12,7 @@ import { TmdlMonacoContributions } from '../tmdl-utils/tmdl.monaco.contributions
   styleUrls: ['./codeeditor.component.css']
 })
 
-export class CodeeditorComponent implements OnChanges {
+export class CodeeditorComponent implements OnChanges, OnInit {
 
   @Input() comparisonData: ComparisonNode;
   public languageName: string = 'tmdl';
@@ -22,6 +22,15 @@ export class CodeeditorComponent implements OnChanges {
     this.embedEditor();
   }
 
+  ngOnInit() {
+    // Set default height of the code editor 
+    const comparisonTable = document.getElementById('comparison-table-container');
+    const mainContainer = document.getElementById('main-container');
+    const codeEditorWrapper = document.getElementById('code-editor-resizable');
+    const codeEditorWrapperHeight = mainContainer.offsetHeight - comparisonTable.offsetHeight;
+    codeEditorWrapper.style.height = ((codeEditorWrapperHeight / mainContainer.offsetHeight) * 100) + '%';
+  }
+
   /**
    * Embed the diff editor below the grid
    */

AlmToolkit/AlmToolkit/html-resources/src/app/grid/grid.component.css

@@ -10,6 +10,12 @@ html, body {
 
 #main-container {
   height: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  overflow-y: hidden;
 }
 
 #comparison-table-container {
@@ -32,7 +38,7 @@ html, body {
   margin: 10px;
   border-collapse: collapse;
   background-color: #FFF;
-  min-width: 99%;
+  min-width: -webkit-fill-available;
   max-width: 99%;
 }
 

AlmToolkit/AlmToolkit/html-resources/src/app/grid/grid.component.ts

@@ -47,6 +47,9 @@ export class GridComponent implements OnInit {
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     this.resizeComparisonTable(event);
+
+    const element = document.getElementById('code-editor-resizable');
+    element.style.removeProperty('max-height');
   }
 
 
@@ -94,8 +97,13 @@ export class GridComponent implements OnInit {
   stopDragging(event: any) {
     if (this.mouseDragged) {
       const mainContainer = document.getElementById('main-container');
-      const gridPercentageHeight = ((event.pageY - mainContainer.offsetTop) / mainContainer.offsetHeight) * 100;
-      const codeEditorPercentageHeight = 100 - gridPercentageHeight;
+      console.log("Dragged");
+      const gridHeight = (event.pageY - mainContainer.offsetTop);
+      const gridPercentageHeight = (gridHeight / mainContainer.offsetHeight) * 100;
+      const codeEditorHeight = mainContainer.offsetHeight - gridHeight - 5;
+      const codeEditorPercentageHeight = (codeEditorHeight / mainContainer.offsetHeight) * 100;
+      document.getElementById('code-editor-resizable').style.maxHeight = ((mainContainer.offsetHeight - 105) / mainContainer.offsetHeight)* 100 + '%';
+
       document.getElementById('comparison-table-container').style.height = gridPercentageHeight.toString() + '%';
       document.getElementById('code-editor-resizable').style.height = codeEditorPercentageHeight.toString() + '%';
       document.removeEventListener('mousemove', this.changeCodeEditorHeight);
@@ -110,10 +118,14 @@ export class GridComponent implements OnInit {
    */
   changeCodeEditorHeight(mouseMoveEvent: any) {
     const codeEditorResizable = document.getElementById('code-editor-resizable');
-    const comparisonTableContainer = document.getElementById('comparison-table-container');
     const mainContainer = document.getElementById('main-container');
+    document.getElementById('code-editor-resizable').style.maxHeight = ((mainContainer.offsetHeight - 105) / mainContainer.offsetHeight) * 100 + '%';
+    const comparisonTableContainer = document.getElementById('comparison-table-container');
+    const gridHeight = (mouseMoveEvent.pageY - mainContainer.offsetTop);
     const gridPercentageHeight = ((mouseMoveEvent.pageY - mainContainer.offsetTop) / mainContainer.offsetHeight) * 100;
-    const codeEditorPercentageHeight = 100 - gridPercentageHeight;
+
+    const codeEditorHeight = mainContainer.offsetHeight - gridHeight - 5;
+    const codeEditorPercentageHeight = (codeEditorHeight / mainContainer.offsetHeight) * 100;
     comparisonTableContainer.style.height = gridPercentageHeight.toString() + '%';
     codeEditorResizable.style.height = codeEditorPercentageHeight.toString() + '%';
   }