diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js
index 063654d4a..34a16d305 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js
@@ -133,9 +133,17 @@ RED.contextMenu = (function () {
             }
 
         }
+
+        var direction = "right";
+        var MENU_WIDTH = 500; // can not use menu width here
+        if ((options.x -$(document).scrollLeft()) >
+            ($(window).width() -MENU_WIDTH)) {
+            direction = "left";
+        }
+        
         menu = RED.menu.init({
-            direction: 'right',
-            onpreselect: function () {
+            direction: direction,
+            onpreselect: function() {
                 disposeMenu()
             },
             onpostselect: function () {
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 5cb5f725c..f6a2d6fde 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
@@ -63,11 +63,14 @@
         padding: 4px 12px 4px 12px;
     }
 
-    &.red-ui-menu-dropdown-submenus > li > a,
-    &.red-ui-menu-dropdown-submenus > li > a:focus {
+    &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-right > li > a,
+    &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-right > li > a:focus {
         padding-right: 20px;
     }
-
+    &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-left > li > a,
+    &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-left > li > a:focus {
+        padding-left: 20px;
+    }
 
 
     & > .active > a,
@@ -199,7 +202,7 @@
     width: 0;
     height: 0;
     margin-top: 5px;
-    margin-left: -30px;
+    margin-left: -15px;
     /* Caret Arrow */
     border-color: transparent;
     border-right-color: var(--red-ui-menuCaret);
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 e837f0805..723c1e9bd 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
@@ -191,7 +191,7 @@
         margin-top: 0;
         li a {
             color: var(--red-ui-header-menu-color);
-            padding: 3px 10px 3px 40px;
+            padding: 3px 10px 3px 30px;
             img {
                 max-width: 100%;
                 margin-right: 10px;
@@ -243,6 +243,7 @@
     }
     .red-ui-menu-dropdown-submenu>a:before {
         border-right-color: var(--red-ui-headerMenuCaret);
+        margin-left: -25px !important;
     }
 
     /* Deploy menu customisations */