Fixes panel resizing issue where resizing window to be smaller would commit panel width to smaller width and not re-expand after window is expanded

app/assets/javascripts/app/controllers/editor.js

@@ -525,17 +525,19 @@ angular.module('app')
     this.leftResizeControl = {};
     this.rightResizeControl = {};
 
-    this.onPanelResizeFinish = function(width, left, isMaxWidth) {
+    this.onPanelResizeFinish = (width, left, isMaxWidth) => {
       if(isMaxWidth) {
         authManager.setUserPrefValue("editorWidth", null);
       } else {
         if(width !== undefined && width !== null) {
           authManager.setUserPrefValue("editorWidth", width);
+          this.leftResizeControl.setWidth(width);
         }
       }
 
       if(left !== undefined && left !== null) {
         authManager.setUserPrefValue("editorLeft", left);
+        this.rightResizeControl.setLeft(left);
       }
       authManager.syncUserPreferences();
     }
@@ -560,11 +562,13 @@ angular.module('app')
         let width = authManager.getUserPrefValue("editorWidth", null);
         if(width !== null) {
           this.leftResizeControl.setWidth(width);
+          this.rightResizeControl.setWidth(width);
         }
 
         let left = authManager.getUserPrefValue("editorLeft", null);
         if(left !== null) {
           this.leftResizeControl.setLeft(left);
+          this.rightResizeControl.setLeft(left);
         }
       }
     }

app/assets/javascripts/app/directives/views/panelResizer.js

@@ -50,9 +50,17 @@ class PanelResizer {
     let resizerWidth = resizerColumn.offsetWidth;
     let minWidth = $scope.minWidth || resizerWidth;
     var pressed = false;
-    var startWidth = panel.scrollWidth, startX = 0, lastDownX = 0, collapsed, lastWidth = startWidth, startLeft, lastLeft;
+    var startWidth = panel.scrollWidth, startX = 0, lastDownX = 0, collapsed, lastWidth = startWidth, startLeft = panel.offsetLeft, lastLeft = startLeft;
     var appFrame;
 
+    $scope.isAtMaxWidth = function() {
+      return Math.round((lastWidth + lastLeft)) == Math.round(getParentRect().width);
+    }
+
+    $scope.isCollapsed = function() {
+      return lastWidth <= minWidth;
+    }
+
     // Handle Double Click Event
     var widthBeforeLastDblClick = 0;
     resizerColumn.ondblclick = () => {
@@ -91,7 +99,8 @@ class PanelResizer {
     }
 
     function reloadDefaultValues() {
-      startWidth = panel.scrollWidth;
+      startWidth = $scope.isAtMaxWidth() ? getParentRect().width : panel.scrollWidth;
+      lastWidth = startWidth;
       appFrame = document.getElementById("app").getBoundingClientRect();
     }
     reloadDefaultValues();
@@ -120,9 +129,9 @@ class PanelResizer {
         width = maxWidth;
       }
 
-      if(width == parentRect.width) {
-        panel.style.width = "100%";
-        panel.style.flexBasis = "100%";
+      if((Math.round(width + lastLeft)) == Math.round(parentRect.width)) {
+        panel.style.width = `calc(100% - ${lastLeft}px)`;
+        panel.style.flexBasis = `calc(100% - ${lastLeft}px)`;
       } else {
         panel.style.flexBasis = width + "px";
         panel.style.width = width + "px";
@@ -135,14 +144,6 @@ class PanelResizer {
       }
     }
 
-    $scope.isCollapsed = function() {
-      return lastWidth <= minWidth;
-    }
-
-    $scope.isAtMaxWidth = function() {
-      return lastWidth == getParentRect().width;
-    }
-
     $scope.setLeft = function(left) {
       panel.style.left = left + "px";
       lastLeft = left;
@@ -218,10 +219,7 @@ class PanelResizer {
     })
 
     function handleWidthEvent(event) {
-      var rect = panel.getBoundingClientRect();
-      var panelMaxX = rect.left + (startWidth || panel.style.maxWidth);
-
-      var x;
+      let x;
       if(event) {
         x = event.clientX;
       } else {