fix(workspace): clamp plugin panel width on window resize

Plugin panels could encroach into the sidebar/content area when the
window was resized smaller, or reopen too wide after a resize while
closed. Add _clampPluginPanelWidth to enforce max width limits both
during window resize events and when panels are first shown.

Author: abose

src/view/WorkspaceManager.js

@@ -213,6 +213,11 @@ define(function (require, exports, module) {
             return;
         }
 
+        // Clamp plugin panel toolbar width so it doesn't encroach into the sidebar/content area
+        if (currentlyShownPanel && $mainToolbar.is(":visible")) {
+            _clampPluginPanelWidth(currentlyShownPanel);
+        }
+
         // FIXME (issue #4564) Workaround https://github.com/codemirror/CodeMirror/issues/1787
         triggerUpdateLayout();
 
@@ -496,12 +501,28 @@ define(function (require, exports, module) {
         return panel.initialSize;
     }
 
+    function _clampPluginPanelWidth(panelBeingShown) {
+        let sidebarWidth = $("#sidebar").outerWidth() || 0;
+        let pluginIconsBarWidth = $pluginIconsBar.outerWidth();
+        let minToolbarWidth = (panelBeingShown.minWidth || 0) + pluginIconsBarWidth;
+        let maxToolbarWidth = Math.max(
+            minToolbarWidth,
+            Math.min(window.innerWidth * 0.75, window.innerWidth - sidebarWidth - 100)
+        );
+        if ($mainToolbar.width() > maxToolbarWidth) {
+            $mainToolbar.width(maxToolbarWidth);
+            $windowContent.css("right", maxToolbarWidth);
+            Resizer.resyncSizer($mainToolbar[0]);
+        }
+    }
+
     function _showPluginSidePanel(panelID) {
         let panelBeingShown = getPanelForID(panelID);
         Resizer.makeResizable($mainToolbar, Resizer.DIRECTION_HORIZONTAL, Resizer.POSITION_LEFT,
             panelBeingShown.minWidth, false, undefined, true,
             undefined, $windowContent, undefined, _getInitialSize(panelBeingShown));
         Resizer.show($mainToolbar[0]);
+        _clampPluginPanelWidth(panelBeingShown);
         recomputeLayout(true);
     }
 

test/spec/MainViewManager-integ-test.js

@@ -1237,5 +1237,102 @@ define(function (require, exports, module) {
                 expect(maxSize).toBeLessThanOrEqual(testWindow.innerWidth * 0.75);
             });
         });
+
+        describe("Plugin panel clamping on window resize", function () {
+            let pluginPanel, $toolbarIcon;
+            const MIN_WIDTH = 200;
+
+            beforeAll(function () {
+                $toolbarIcon = _$('<a id="test-clamp-icon" href="#"></a>');
+                _$("#plugin-icons-bar").append($toolbarIcon);
+
+                let panelTemplate = '<div id="test-clamp-panel">Test Panel</div>';
+                pluginPanel = WorkspaceManager.createPluginPanel(
+                    "test-clamp-panel", _$(panelTemplate), MIN_WIDTH, $toolbarIcon
+                );
+            });
+
+            afterAll(function () {
+                if (pluginPanel) {
+                    pluginPanel.hide();
+                }
+                $toolbarIcon.remove();
+            });
+
+            afterEach(function () {
+                pluginPanel.hide();
+            });
+
+            it("should clamp plugin panel when window resizes smaller", function () {
+                pluginPanel.show();
+                WorkspaceManager.setPluginPanelWidth(600);
+
+                const $mainToolbar = _$("#main-toolbar");
+                const widthBefore = $mainToolbar.width();
+
+                // Simulate a narrow window resize
+                const sidebarWidth = _$("#sidebar").outerWidth() || 0;
+                const maxAllowed = Math.min(
+                    testWindow.innerWidth * 0.75,
+                    testWindow.innerWidth - sidebarWidth - 100
+                );
+
+                // Only expect clamping if the panel was wider than max
+                if (widthBefore > maxAllowed) {
+                    testWindow.dispatchEvent(new testWindow.Event("resize"));
+                    expect($mainToolbar.width()).toBeLessThanOrEqual(maxAllowed);
+                } else {
+                    // Panel fits, dispatch resize and verify it stays unchanged
+                    testWindow.dispatchEvent(new testWindow.Event("resize"));
+                    expect($mainToolbar.width()).toEqual(widthBefore);
+                }
+            });
+
+            it("should not let toolbar disappear on window resize", function () {
+                pluginPanel.show();
+
+                const $mainToolbar = _$("#main-toolbar");
+                const $pluginIconsBar = _$("#plugin-icons-bar");
+
+                testWindow.dispatchEvent(new testWindow.Event("resize"));
+
+                // Toolbar must remain at least as wide as the icons bar + panel minWidth
+                const minToolbarWidth = MIN_WIDTH + $pluginIconsBar.outerWidth();
+                expect($mainToolbar.width()).toBeGreaterThanOrEqual(minToolbarWidth);
+            });
+
+            it("should clamp panel width when shown after window was resized", function () {
+                // Panel is hidden; compute what the max toolbar width would be
+                const sidebarWidth = _$("#sidebar").outerWidth() || 0;
+                const $pluginIconsBar = _$("#plugin-icons-bar");
+                const maxToolbarWidth = Math.min(
+                    testWindow.innerWidth * 0.75,
+                    testWindow.innerWidth - sidebarWidth - 100
+                );
+
+                // Now show the panel — it should be clamped to maxToolbarWidth
+                pluginPanel.show();
+
+                const $mainToolbar = _$("#main-toolbar");
+                expect($mainToolbar.width()).toBeLessThanOrEqual(maxToolbarWidth);
+
+                // And content area should match
+                const $windowContent = _$(".content");
+                const rightOffset = parseInt($windowContent.css("right"), 10);
+                expect(rightOffset).toEqual($mainToolbar.width());
+            });
+
+            it("should keep content right offset in sync after resize clamp", function () {
+                pluginPanel.show();
+                WorkspaceManager.setPluginPanelWidth(600);
+
+                testWindow.dispatchEvent(new testWindow.Event("resize"));
+
+                const $mainToolbar = _$("#main-toolbar");
+                const $windowContent = _$(".content");
+                const rightOffset = parseInt($windowContent.css("right"), 10);
+                expect(rightOffset).toEqual($mainToolbar.width());
+            });
+        });
     });
 });