fix: right toolbar disappearing and sidebar overflow in editor mode

- Guard Resizer drag-hide behind the collapsible flag so non-collapsible
  panels (main-toolbar, pane splitters, bottom-panel-container) cannot
  be squeezed to zero and hidden when maxsize is driven below 10px by a
  narrow window.
- Floor main-toolbar's data("maxsize") at its minimum width in
  updateResizeLimits, so narrow-window/wide-sidebar cases cannot cap
  the toolbar below usable size.
- Add _getSidebarWidth() using offsetWidth; jQuery outerWidth() returns
  the stale style.width on a display:none sidebar, which corrupted the
  layout math.
- Re-clamp the plugin panel when the sidebar is shown/hidden/resized.
- Add _ensureEditorLayoutFits(): in editor mode, coordinate sidebar,
  editor, and plugin-panel so all three share the window. Shrinks the
  sidebar after toolbar clamping if sidebar + CCB + toolbar + min
  editor exceeds the window width. No-op in design mode, which pins
  its own geometry with !important.

Author: abose

src/utils/Resizer.js

@@ -503,22 +503,26 @@ define(function (require, exports, module) {
                     previousSize = newSize;
 
                     if ($element.is(":visible")) {
-                        if (newSize < 10) {
+                        if (collapsible && newSize < 10) {
                             toggle($element);
                             elementSizeFunction.apply($element, [0]);
                         } else {
-                            // Trigger resizeStarted just before the first successful resize update
+                            // Non-collapsible panels must never be auto-hidden by a drag that
+                            // squeezes them to near-zero — a narrow window with a wide sidebar
+                            // can push maxsize below 10, and hiding the toolbar that way
+                            // strands the user with no way to get it back.
+                            var effectiveSize = collapsible ? newSize : Math.max(newSize, minSize);
                             if (!resizeStarted) {
                                 resizeStarted = true;
-                                $element.trigger(EVENT_PANEL_RESIZE_START, newSize);
+                                $element.trigger(EVENT_PANEL_RESIZE_START, effectiveSize);
                             }
 
                             // Resize the main element to the new size. If there is a content element,
                             // its size is the new size minus the size of the non-resizable elements
-                            resizeElement(newSize, (newSize - baseSize));
-                            adjustSibling(newSize);
+                            resizeElement(effectiveSize, (effectiveSize - baseSize));
+                            adjustSibling(effectiveSize);
 
-                            $element.trigger(EVENT_PANEL_RESIZE_UPDATE, [newSize]);
+                            $element.trigger(EVENT_PANEL_RESIZE_UPDATE, [effectiveSize]);
                         }
                     } else if (newSize > 10) {
                         elementSizeFunction.apply($element, [newSize]);

src/view/WorkspaceManager.js

@@ -88,6 +88,20 @@ define(function (require, exports, module) {
      */
     const MAIN_TOOLBAR_WIDTH = 30;
 
+    /**
+     * Returns the sidebar's rendered width, or 0 if hidden. jQuery's outerWidth()
+     * on a display:none element that still carries an explicit style.width returns
+     * that stale width rather than 0, which corrupts main-view layout math.
+     * @private
+     */
+    function _getSidebarWidth() {
+        var sb = document.getElementById("sidebar");
+        if (!sb || sb.offsetWidth === 0) {
+            return 0;
+        }
+        return sb.offsetWidth;
+    }
+
     /**
      * The ".content" vertical stack (editor + all header/footer panels)
      * @type {jQueryObject}
@@ -184,8 +198,14 @@ define(function (require, exports, module) {
             }
         });
 
-        var sidebarWidth = $("#sidebar").outerWidth() || 0;
-        $mainToolbar.data("maxsize", Math.min(window.innerWidth * 0.75, window.innerWidth - sidebarWidth - 100));
+        var sidebarWidth = _getSidebarWidth();
+        var pluginIconsBarWidth = $pluginIconsBar.outerWidth() || MAIN_TOOLBAR_WIDTH;
+        var minToolbarWidth = ((currentlyShownPanel && currentlyShownPanel.minWidth) || 0) + pluginIconsBarWidth;
+        // Floor the toolbar's maxsize at its minimum width. Without the floor, a narrow
+        // window with a wide sidebar can drive the cap below 10px, and Resizer's drag
+        // logic would then squeeze the toolbar to zero and hide it.
+        var rawMax = Math.min(window.innerWidth * 0.75, window.innerWidth - sidebarWidth - 100);
+        $mainToolbar.data("maxsize", Math.max(minToolbarWidth, rawMax));
     }
 
 
@@ -224,6 +244,8 @@ define(function (require, exports, module) {
         if (currentlyShownPanel && $mainToolbar.is(":visible")) {
             _clampPluginPanelWidth(currentlyShownPanel);
         }
+        // Then coordinate sidebar width in editor mode so the three regions fit.
+        _ensureEditorLayoutFits();
 
         // FIXME (issue #4564) Workaround https://github.com/codemirror/CodeMirror/issues/1787
         triggerUpdateLayout();
@@ -375,6 +397,19 @@ define(function (require, exports, module) {
         $mainPluginPanel = $("#main-plugin-panel");
         $pluginIconsBar = $("#plugin-icons-bar");
 
+        // Sidebar show/resize steals width from the plugin-panel area. Without
+        // re-clamping, the main-toolbar keeps its previous (now-oversized) width
+        // and overlaps the sidebar/editor. Mirror the window-resize handling.
+        $("#sidebar").on("panelExpanded.workspace panelCollapsed.workspace panelResizeEnd.workspace",
+            function () {
+                if (currentlyShownPanel && $mainToolbar.is(":visible")) {
+                    _clampPluginPanelWidth(currentlyShownPanel);
+                }
+                _ensureEditorLayoutFits();
+                triggerUpdateLayout();
+                updateResizeLimits();
+            });
+
         // --- Create the bottom panel tabbed container ---
         $bottomPanelContainer = $('<div id="bottom-panel-container" class="vert-resizable top-resizer"></div>');
         let $bottomPanelTabBar = $('<div id="bottom-panel-tab-bar"></div>');
@@ -530,7 +565,7 @@ define(function (require, exports, module) {
     }
 
     function _clampPluginPanelWidth(panelBeingShown) {
-        let sidebarWidth = $("#sidebar").outerWidth() || 0;
+        let sidebarWidth = _getSidebarWidth();
         let pluginIconsBarWidth = $pluginIconsBar.outerWidth();
         let minToolbarWidth = (panelBeingShown.minWidth || 0) + pluginIconsBarWidth;
         let maxToolbarWidth = Math.max(
@@ -546,6 +581,45 @@ define(function (require, exports, module) {
         }
     }
 
+    const CCB_WIDTH = 30;
+    const MIN_EDITOR_WIDTH = 100;
+    const MIN_SIDEBAR_WIDTH = 30;
+
+    /**
+     * In editor mode the sidebar, editor, and plugin-panel (main-toolbar) must
+     * share the horizontal space. Resizer's own sidebar clamp runs lazily on
+     * the next mousemove, and only considers percent-based max sizes — so a
+     * window shrink, or showing the sidebar at its remembered width, can leave
+     * the sidebar overlapping the live-preview panel. Here we do an eager
+     * coordinated shrink: clamp sidebar so sidebar + CCB + current toolbar +
+     * MIN_EDITOR_WIDTH fits in the window. Design mode handles its own
+     * geometry with !important, so this is a no-op there.
+     * @private
+     */
+    function _ensureEditorLayoutFits() {
+        if (_isInDesignMode) {
+            return;
+        }
+        var $sb = $("#sidebar");
+        if (!$sb.length || $sb[0].offsetWidth === 0) {
+            return;
+        }
+        var toolbarW = $mainToolbar.is(":visible") ? $mainToolbar.width() : 0;
+        var maxSidebar = window.innerWidth - CCB_WIDTH - toolbarW - MIN_EDITOR_WIDTH;
+        var currentSb = $sb[0].offsetWidth;
+        if (currentSb > maxSidebar) {
+            var newSb = Math.max(MIN_SIDEBAR_WIDTH, maxSidebar);
+            $sb.width(newSb);
+            var resync = $sb.data("resyncSizer");
+            if (typeof resync === "function") {
+                resync();
+            }
+            // Notify listeners (CCB syncs its left offset; content tracks via forceleft).
+            $sb.trigger("panelResizeUpdate", [newSb]);
+            $sb.trigger("panelResizeEnd", [newSb]);
+        }
+    }
+
     function _showPluginSidePanel(panelID) {
         let panelBeingShown = getPanelForID(panelID);
         let pluginIconsBarWidth = $pluginIconsBar.outerWidth();
@@ -615,7 +689,7 @@ define(function (require, exports, module) {
         // Respect min/max constraints
         var minSize = currentlyShownPanel.minWidth || 0;
         var minToolbarWidth = minSize + pluginIconsBarWidth;
-        var sidebarWidth = $("#sidebar").outerWidth() || 0;
+        var sidebarWidth = _getSidebarWidth();
         var maxToolbarWidth = Math.min(window.innerWidth * 0.75, window.innerWidth - sidebarWidth - 100);
         newToolbarWidth = Math.max(newToolbarWidth, minToolbarWidth);
         newToolbarWidth = Math.min(newToolbarWidth, maxToolbarWidth);