fix: right toolbar disappearing and sidebar overflow in editor mode

src/index.html

@@ -937,7 +937,10 @@
     <div id="centralControlBar" class="no-focus">
         <div class="ccb-group ccb-group-top">
             <a href="#" id="ccbCollapseEditorBtn" class="ccb-btn" title="Switch to Design Mode">
-                <i class="fa-solid fa-feather"></i>
+                <svg class="ccb-pen-nib-icon" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                    <path d="M19.8301 13.3181L19.8253 13.2941L17.7493 6.36938C17.461 5.41309 16.7305 4.65382 15.7791 4.33666L3.07815 0.0790007C2.66007 -0.0603584 2.20355 -0.0123035 1.82872 0.199138L9.29645 7.66686C9.48867 7.614 9.68569 7.58998 9.89233 7.58998C11.1658 7.58998 12.199 8.62316 12.199 9.89661C12.199 11.1701 11.1658 12.2032 9.89233 12.2032C8.61888 12.2032 7.5857 11.1701 7.5857 9.89661C7.5857 9.68997 7.61453 9.48814 7.66258 9.30073L0.199661 1.833C-0.0117809 2.20783 -0.0598357 2.65955 0.0795234 3.08243L4.33718 15.7833C4.65435 16.73 5.41362 17.4653 6.36991 17.7536L13.2946 19.8295L13.3186 19.8344L19.8301 13.3229V13.3181Z" fill="currentColor"/>
+                    <line x1="14.1513" y1="20.5938" x2="20.5906" y2="14.1064" stroke="currentColor" stroke-width="1.15332"/>
+                </svg>
             </a>
             <a href="#" id="ccbSidebarToggleBtn" class="ccb-btn" title="Toggle sidebar">
                 <i class="fa-solid fa-angles-left"></i>

src/nls/root/strings.js

@@ -2074,6 +2074,7 @@ define({
     "PROMO_LEARN_MORE": "Learn More\u2026",
     "PROMO_OPT_OUT_LINK": "Opt out?",
     "PROMO_OPT_OUT_NOTE": "You can cancel your trial anytime by selecting `Help > Cancel Phoenix Pro Trial`.",
+    "PROMO_OPT_OUT_DIALOG_TITLE": "Cancel Phoenix Pro Trial",
     "PROMO_UPGRADE_APP_UPSELL_BUTTON": "Upgrade to {0}",
     "PROMO_PRO_ENDED_TITLE": "{0} trial ended",
     "PROMO_PHOENIX_PRO_ENDED_MESSAGE": "Thanks for trying Pro! <b>You're now on the Free Community Edition.</b> <br>Upgrade anytime to unlock these features:",

src/styles/CentralControlBar.less

@@ -101,6 +101,12 @@
     /* Nudge the collapse-editor icon up so it visually aligns with titlebar icons */
     #ccbCollapseEditorBtn {
         margin-top: -2px;
+
+        svg {
+            width: 15px;
+            height: 15px;
+            pointer-events: none;
+        }
     }
 
     /* Nav buttons: suppress legacy sprite styles (NavigationProvider toggles enabled/disabled class) */

src/utils/Resizer.js

@@ -503,22 +503,26 @@
                     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/CentralControlBar.js

@@ -40,6 +40,7 @@ define(function (require, exports, module) {
     let livePreviewWasOpen = false;
     let savedSidebarMaxSize = null;
     let applyingCollapsedLayout = false;
+    let penNibIconHTML = null;
 
     function _getRenderedSidebarWidth() {
         // Use offsetWidth (not jQuery's outerWidth) to force a synchronous reflow
@@ -238,7 +239,7 @@ define(function (require, exports, module) {
         const $collapseBtn = $("#ccbCollapseEditorBtn");
         $collapseBtn.toggleClass("is-active", editorCollapsed)
             .attr("title", editorCollapsed ? Strings.CCB_SWITCH_TO_CODE_EDITOR : Strings.CCB_SWITCH_TO_DESIGN_MODE);
-        $collapseBtn.find("i").attr("class", editorCollapsed ? "fa-solid fa-code" : "fa-solid fa-feather");
+        $collapseBtn.html(editorCollapsed ? '<i class="fa-solid fa-code"></i>' : penNibIconHTML);
         if (_toggleDesignModeCommand) {
             _toggleDesignModeCommand.setChecked(editorCollapsed);
         }
@@ -303,6 +304,10 @@ define(function (require, exports, module) {
         $fileLabel = $("#ccbFileLabel");
         $fileName = $fileLabel.find(".ccb-file-name");
 
+        // Cache the authored pen-nib SVG from the DOM so the toggle handler
+        // can restore it after swapping in the fa-code icon for design mode.
+        penNibIconHTML = $("#ccbCollapseEditorBtn").html();
+
         _wireButtons();
         // The HTML titles on the control-bar buttons are fallback English
         // strings; set the localized versions up front so the initial render

src/view/WorkspaceManager.js

@@ -88,6 +88,20 @@
      */
     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 @@
             }
         });
 
-        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 @@
         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 @@
         $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 @@
     }
 
     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 @@
         }
     }
 
+    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 @@
         // 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);

tracking-repos.json

@@ -1,5 +1,5 @@
 {
   "phoenixPro": {
-    "commitID": "227551b263c5d4ea5233e3920639bc5aa493b321"
+    "commitID": "59e1d73841f94f546ad9b62a76217eb0a1e450e8"
   }
 }