Fix: submenu is occluded by the central control bar

src/command/Menus.js

@@ -763,9 +763,9 @@ define(function (require, exports, module) {
                 // This is to prevent size jumps when the keyboard
                 // icon hides and shows as selection changes
                 $menuAnchor.addClass("use-invisible-for-width-compute");
-                const currentWidth = $(this).width(); // Get the current width
+                const currentWidth = window.getComputedStyle(this).width;
                 $menuAnchor.removeClass("use-invisible-for-width-compute");
-                $(this).css('min-width', currentWidth + 'px');
+                $(this).css('min-width', currentWidth);
                 self.closeSubMenu();
                 // now show selection
                 $menuItem.parent().find(".menuAnchor").removeClass("selected");
@@ -937,9 +937,9 @@ define(function (require, exports, module) {
         let self = this;
         $menuItem.on("mouseenter", function (e) {
             $menuAnchor.addClass("use-invisible-for-width-compute");
-            const currentWidth = $(this).width(); // Get the current width
+            const currentWidth = window.getComputedStyle(this).width;
             $menuAnchor.removeClass("use-invisible-for-width-compute");
-            $(this).css('min-width', currentWidth + 'px'); // Set min-width to the current width
+            $(this).css('min-width', currentWidth);
             if (self.openSubMenu && self.openSubMenu.id === menu.id) {
                 return;
             }

src/styles/CentralControlBar.less

@@ -28,7 +28,7 @@
     height: 100%;
     width: @central-control-bar-width;
     left: @sidebar-width; /* updated dynamically when sidebar resizes */
-    z-index: @z-index-brackets-main-content + 1;
+    z-index: @z-index-brackets-main-content - 1;
     display: flex;
     flex-direction: column;
     align-items: stretch;

src/styles/brackets.less

@@ -335,7 +335,7 @@ a, img {
         left: (@sidebar-width + 30px);  // changed dynamically via Resizer + CentralControlBar
         right: @main-toolbar-width;
         z-index: @z-index-brackets-main-content;
-        border-left: 2px solid rgba(255, 255, 255, 0.10);
+        border-left: 2px solid transparent;
         border-right: 2px solid rgba(255, 255, 255, 0.10);
     }
 

src/styles/brackets_variables.less

@@ -22,7 +22,7 @@
 
 /* Brackets Variables */
 :root {
- /* Above the central control bar (@z-index-brackets-main-content + 1 = 20) so the
+ /* Above the central control bar (@z-index-brackets-main-content - 1 = 18) so the
     parameter hint is never occluded by it when it sits near the editor's left edge. */
  --z-index-parameter-hints: 21;
  --editor-line-height: 1.5;