diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js index 9bf2982891..44fe645684 100644 --- a/src/utils/Resizer.js +++ b/src/utils/Resizer.js @@ -394,9 +394,13 @@ define(function (require, exports, module) { // reposition it if the element size changes externally function repositionResizer(elementSize) { var resizerPosition = elementSize || 1; - if (position === POSITION_RIGHT || position === POSITION_BOTTOM) { - $resizer.css(resizerCSSPosition, resizerPosition); + if (position !== POSITION_RIGHT && position !== POSITION_BOTTOM) { + return; } + if (collapsible && !isVisible($element)) { + return; + } + $resizer.css(resizerCSSPosition, resizerPosition); } $element.data("removeSizable", function () { diff --git a/src/view/CentralControlBar.js b/src/view/CentralControlBar.js index 8610a82a4e..0686ad2d45 100644 --- a/src/view/CentralControlBar.js +++ b/src/view/CentralControlBar.js @@ -209,7 +209,8 @@ define(function (require, exports, module) { if (targetWidth < minLPToolbarWidth) { targetWidth = minLPToolbarWidth; } - if (sidebarWidth + BAR_WIDTH + targetWidth + MIN_EDITOR_WIDTH > window.innerWidth) { + if (SidebarView.isVisible() && + sidebarWidth + BAR_WIDTH + targetWidth + MIN_EDITOR_WIDTH > window.innerWidth) { const trimmedSidebar = Math.max(30, window.innerWidth - BAR_WIDTH - targetWidth - MIN_EDITOR_WIDTH); $sidebar.width(trimmedSidebar); // jQuery .width() sidesteps Resizer — manually reposition its handle so diff --git a/src/view/WorkspaceManager.js b/src/view/WorkspaceManager.js index a17e5663ce..f653abc7eb 100644 --- a/src/view/WorkspaceManager.js +++ b/src/view/WorkspaceManager.js @@ -601,7 +601,7 @@ define(function (require, exports, module) { return; } var $sb = $("#sidebar"); - if (!$sb.length || $sb[0].offsetWidth === 0) { + if (!$sb.length || !Resizer.isVisible($sb) || $sb[0].offsetWidth === 0) { return; } var toolbarW = $mainToolbar.is(":visible") ? $mainToolbar.width() : 0; diff --git a/test/spec/CentralControlBar-integ-test.js b/test/spec/CentralControlBar-integ-test.js index 3fe377a13d..9cc09be31b 100644 --- a/test/spec/CentralControlBar-integ-test.js +++ b/test/spec/CentralControlBar-integ-test.js @@ -230,6 +230,36 @@ define(function (require, exports, module) { SidebarView.show(); await awaitsFor(function () { return SidebarView.isVisible(); }, "sidebar to show again", 2000); }); + + it("should keep the handle parked at the CCB edge when the layout is clamped while hidden", + async function () { + await openLivePreview(); + SidebarView.hide(); + await awaitsFor(function () { return !SidebarView.isVisible(); }, "sidebar to hide", 2000); + + const toolbarWidth = _$("#main-toolbar").is(":visible") ? _$("#main-toolbar").width() : 0; + const maxSidebar = testWindow.innerWidth - CCB_WIDTH - toolbarWidth - 100; + const overLimitWidth = maxSidebar + 50; + expect(overLimitWidth).toBeLessThan(testWindow.innerWidth); + _$("#sidebar").width(overLimitWidth); + + testWindow.dispatchEvent(new testWindow.Event("resize")); + + const $resizer = _$(".main-view > .horz-resizer"); + expect($resizer.length).toBe(1); + expect(Math.round($resizer[0].getBoundingClientRect().left)).toBe(CCB_WIDTH); + expect(_$("#sidebar")[0].offsetWidth).toBe(overLimitWidth); + + SidebarView.show(); + await awaitsFor(function () { return SidebarView.isVisible(); }, "sidebar to show again", 2000); + const sidebarWidth = _$("#sidebar")[0].offsetWidth; + expect(sidebarWidth).toBeLessThan(overLimitWidth); + const $shownResizer = _$("#sidebar > .horz-resizer"); + expect(Math.round($shownResizer[0].getBoundingClientRect().left)) + .toBe(sidebarWidth + CCB_WIDTH); + + SidebarView.resize(200); + }); }); describe("2. CCB buttons", function () {