From 6ab74951f43068a9eda1e4e2f8de39e41b917b3e Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 24 Sep 2021 19:44:05 +0100
Subject: [PATCH] Fix menu shortcut display when menu label is long

---
 .../@node-red/editor-client/src/js/ui/common/menu.js   |  4 ++--
 .../@node-red/editor-client/src/js/ui/view.js          |  2 +-
 .../@node-red/editor-client/src/js/ui/workspaces.js    |  4 ----
 .../@node-red/editor-client/src/sass/dropdownMenu.scss | 10 ++++++++--
 .../@node-red/editor-client/src/sass/header.scss       |  1 -
 5 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
index e8c678333..f1239edef 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
@@ -82,7 +82,7 @@ RED.menu = (function() {
                 linkContent += '<span class="red-ui-menu-label-container"><span class="red-ui-menu-label">'+opt.label+'</span>'+
                                '<span class="red-ui-menu-sublabel">'+opt.sublabel+'</span></span>'
             } else {
-                linkContent += '<span class="red-ui-menu-label">'+opt.label+'</span>'
+                linkContent += '<span class="red-ui-menu-label"><span>'+opt.label+'</span></span>'
             }
 
             linkContent += '</a>';
@@ -92,7 +92,7 @@ RED.menu = (function() {
             if (typeof opt.onselect === 'string') {
                 var shortcut = RED.keyboard.getShortcut(opt.onselect);
                 if (shortcut && shortcut.key) {
-                    opt.shortcutSpan = $('<span class="red-ui-popover-key">'+RED.keyboard.formatKey(shortcut.key, true)+'</span>').appendTo(link);
+                    opt.shortcutSpan = $('<span class="red-ui-popover-key">'+RED.keyboard.formatKey(shortcut.key, true)+'</span>').appendTo(link.find(".red-ui-menu-label"));
                 }
             }
 
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
index ba41d3f0d..8ccbf6fe4 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
@@ -686,7 +686,7 @@ RED.view = (function() {
             });
 
             activeGroups = RED.nodes.groups(activeWorkspace)||[];
-            activeGroups.forEach(function(g) {
+            activeGroups.forEach(function(g, i) {
                 g._index = i;
                 if (g.g) {
                     g._root = g.g;
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
index fcffca5c9..a6288a7f3 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
@@ -24,10 +24,6 @@ RED.workspaces = (function() {
     var hideStack = [];
     var viewStackPos = 0;
 
-    function isSameObj(env0, env1) {
-        return (JSON.stringify(env0) === JSON.stringify(env1));
-    }
-
     function addToViewStack(id) {
         if (viewStackPos !== viewStack.length) {
             viewStack.splice(viewStackPos);
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
index ca19afc73..3901658fa 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
@@ -46,7 +46,7 @@
     & > li > a,
     & > li > a:focus {
         display: block;
-        padding: 4px 0 4px 32px;
+        padding: 4px 12px 4px 32px;
         clear: both;
         font-weight: normal;
         line-height: 20px;
@@ -106,11 +106,17 @@
                 display: none;
             }
         }
+        .red-ui-menu-label {
+            display: flex;
+            & > :first-child {
+                flex-grow: 1
+            }
+        }
         .red-ui-popover-key {
             border: none;
             padding: 0;
             font-size: 13px;
-            float: right;
+            // float: right;
             color: $menuColor;
             border-color: $menuColor;
         }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/header.scss b/packages/node_modules/@node-red/editor-client/src/sass/header.scss
index 02528a446..e638506b4 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/header.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/header.scss
@@ -214,7 +214,6 @@
             }
             span.red-ui-menu-label {
                 font-size: 14px;
-                display: inline-block;
                 text-indent: 0px;
             }
             span.red-ui-menu-sublabel {