From 471c5eecda0f80ebf6828f1cd60a8e0ecad0d7a8 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Wed, 7 Jan 2026 16:33:04 +0000
Subject: [PATCH] WIP

---
 .../src/js/ui/common/treeList.js              | 30 +++++----
 .../editor-client/src/js/ui/sidebar.js        | 58 +++++++++++-----
 .../src/js/ui/tab-info-outliner.js            | 25 ++++---
 .../editor-client/src/sass/colors.scss        | 38 ++++++-----
 .../editor-client/src/sass/dropdownMenu.scss  |  8 +--
 .../editor-client/src/sass/header.scss        | 67 ++++++++++---------
 .../editor-client/src/sass/sizes.scss         |  2 +-
 .../editor-client/src/sass/tab-info.scss      | 13 +++-
 .../editor-client/src/sass/variables.scss     |  2 +
 9 files changed, 149 insertions(+), 94 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
index 85c6f0992..3769474fc 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
@@ -28,6 +28,7 @@
  *   - autoSelect: boolean - default true - triggers item selection when navigating
  *                           list by keyboard. If the list has checkboxed items
  *                           you probably want to set this to false
+ *   - expandOnLabel: boolean - default true - items expand when their label is clicked
  *
  * methods:
  *   - data(items) - clears existing items and replaces with new data
@@ -91,6 +92,7 @@
  *
  *
  */
+    const paddingPerDepth = 5;
 
     $.widget( "nodered.treeList", {
         _create: function() {
@@ -342,11 +344,11 @@
             if (child.depth !== parent.depth+1) {
                 child.depth = parent.depth+1;
                 // var labelPaddingWidth = ((child.gutter ? child.gutter[0].offsetWidth + 2 : 0) + (child.depth * 20));
-                var labelPaddingWidth = (((child.gutter&&!child.gutter.hasClass("red-ui-treeList-gutter-float"))?child.gutter.width()+2:0)+(child.depth*20));
+                var labelPaddingWidth = (((child.gutter&&!child.gutter.hasClass("red-ui-treeList-gutter-float"))?child.gutter.width()+2:0)+(child.depth*paddingPerDepth));
                 child.treeList.labelPadding.width(labelPaddingWidth+'px');
                 if (child.element) {
                     $(child.element).css({
-                        width: "calc(100% - "+(labelPaddingWidth+20+(child.icon?20:0))+"px)"
+                        width: "calc(100% - "+(labelPaddingWidth+paddingPerDepth+(child.icon?paddingPerDepth:0))+"px)"
                     })
                 }
                 // This corrects all child item depths
@@ -475,7 +477,7 @@
                     if (!childrenAdded) {
                         startTime = Date.now();
                         spinner = $('<div class="red-ui-treeList-spinner">').css({
-                            "background-position": (35+depth*20)+'px 50%'
+                            "background-position": (35+depth*paddingPerDepth)+'px 50%'
                         }).appendTo(container);
                     }
 
@@ -527,10 +529,10 @@
                         $(element).appendTo(item.treeList.label);
                         // using the JQuery Object, the gutter width will
                         // be wrong when the element is reattached the second time
-                        var labelPaddingWidth = (item.gutter ? item.gutter[0].offsetWidth + 2 : 0) + (item.depth * 20);
+                        var labelPaddingWidth = (item.gutter ? item.gutter[0].offsetWidth + 2 : 0) + (item.depth * paddingPerDepth);
 
                         $(element).css({
-                            width: "calc(100% - "+(labelPaddingWidth+20+(item.icon?20:0))+"px)"
+                            width: "calc(100% - "+(labelPaddingWidth+paddingPerDepth+(item.icon?paddingPerDepth:0))+"px)"
                         })
                     }
                     item.element = element;
@@ -565,7 +567,7 @@
 
             }
 
-            var labelPaddingWidth = ((item.gutter&&!item.gutter.hasClass("red-ui-treeList-gutter-float"))?item.gutter.width()+2:0)+(depth*20);
+            var labelPaddingWidth = ((item.gutter&&!item.gutter.hasClass("red-ui-treeList-gutter-float"))?item.gutter.width()+2:0)+(depth*paddingPerDepth);
 
             item.treeList.labelPadding = $('<span>').css({
                 display: "inline-block",
@@ -617,6 +619,7 @@
                 }
                 $('<i class="fa fa-angle-right" />').toggleClass("hide",item.collapsible === false).appendTo(treeListIcon);
                 treeListIcon.on("click.red-ui-treeList-expand", function(e) {
+                    console.log('click expand icon')
                         e.stopPropagation();
                         e.preventDefault();
                         if (container.hasClass("expanded")) {
@@ -627,12 +630,15 @@
                     });
                 // $('<span class="red-ui-treeList-icon"><i class="fa fa-folder-o" /></span>').appendTo(label);
                 label.on("click.red-ui-treeList-expand", function(e) {
-                    if (container.hasClass("expanded")) {
-                        if (item.hasOwnProperty('selected') || label.hasClass("selected")) {
-                            item.treeList.collapse();
+                    if (that.options.expandOnLabel !== false) {
+                        if (container.hasClass("expanded")) {
+                            if (item.hasOwnProperty('selected') || label.hasClass("selected")) {
+                                item.treeList.collapse();
+                            }
+                        } else {
+                            console.log('click on label expand')
+                            item.treeList.expand();
                         }
-                    } else {
-                        item.treeList.expand();
                     }
                 })
                 if (!item.children) {
@@ -770,7 +776,7 @@
             } else if (item.element) {
                 $(item.element).appendTo(label);
                 $(item.element).css({
-                    width: "calc(100% - "+(labelPaddingWidth+20+(item.icon?20:0))+"px)"
+                    width: "calc(100% - "+(labelPaddingWidth+paddingPerDepth+(item.icon?paddingPerDepth:0))+"px)"
                 })
             }
             if (item.children) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js
index f7b1c3dc3..190c7a225 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js
@@ -32,7 +32,7 @@ RED.sidebar = (function() {
             maximumWidth: 800,
             // Make LH side slightly narrower by default as its the palette that doesn't require a lot of width
             defaultWidth: 210,
-            defaultTopHeight: 0.4
+            defaultTopHeight: 0.5
         }
     }
     const defaultSidebarConfiguration = {
@@ -189,6 +189,11 @@ RED.sidebar = (function() {
             const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary;
             // 
             if (targetSidebar.tabBars[options.targetSection].active === options.id && RED.menu.isSelected(targetSidebar.menuToggle)) {
+                // if (!targetSidebar.sections[options.targetSection].hidden) {
+                //     targetSidebar.hideSection(options.targetSection)
+                // } else {
+                //     targetSidebar.showSection(options.targetSection)
+                // }
                 RED.menu.setSelected(targetSidebar.menuToggle, false);
             } else {
                 RED.sidebar.show(options.id)
@@ -264,23 +269,30 @@ RED.sidebar = (function() {
             sidebar.tabBars.bottom.resizeSidebarTabBar();
         }
         sidebar.hideSection = function (position) {
-            sidebar.sections.bottom.container.hide()
-            sidebar.sections.bottom.hidden = true
-            sidebar.sections.top.container.css('flex-grow', '1')
-            sidebar.tabBars.top.container.css('flex-grow', '1')
-            sidebar.tabBars.bottom.container.css('flex-grow', '0')
-            sidebar.tabBars.bottom.container.css('height', '60px')
+            sidebar.sections[position].container.hide()
+            sidebar.sections[position].hidden = true
+
+            const otherPosition = position === 'top' ? 'bottom' : 'top'
+            sidebar.sections[otherPosition].container.css('flex-grow', '1')
+
+            sidebar.tabBars[position].clearSelected()
+            // sidebar.tabBars.top.container.css('flex-grow', '1')
+            // sidebar.tabBars[position].container.css('flex-grow', '0')
+            // sidebar.tabBars[position].container.css('height', '60px')
             
             sidebar.resizeSidebar()
         }
         sidebar.showSection = function (position) {
-            sidebar.sections.bottom.container.show()
-            sidebar.sections.bottom.hidden = false
-            sidebar.sections.top.container.css('flex-grow', '0')
-            sidebar.sections.top.container.css('height', '70%')
-            sidebar.tabBars.top.container.css('flex-grow', '')
-            sidebar.tabBars.bottom.container.css('flex-grow', '')
-            sidebar.tabBars.bottom.container.css('height', '')
+            sidebar.sections[position].container.show()
+            sidebar.sections[position].hidden = false
+            const otherPosition = position === 'top' ? 'bottom' : 'top'
+            sidebar.sections[otherPosition].container.css('flex-grow', '0')
+            sidebar.sections[otherPosition].container.css('height', '70%')
+            // sidebar.tabBars.top.container.css('flex-grow', '')
+            // sidebar.tabBars[position].container.css('flex-grow', '')
+            // sidebar.tabBars[position].container.css('height', '')
+            sidebar.tabBars[position].active
+            sidebar.tabBars[position].container.find('button[data-tab-id="'+sidebar.tabBars[position].active+'"]').addClass('selected')
 
             sidebar.resizeSidebar()
         }
@@ -342,6 +354,14 @@ RED.sidebar = (function() {
             connectWith: ".red-ui-sidebar-tab-bar-buttons",
             start: function(event, ui) {
                 const tabId = ui.item.attr('data-tab-id');
+                const tabCount = tabBarButtonsContainer.children('button:not(.red-ui-sidebar-tab-bar-overflow-button):not(.red-ui-sidebar-tab-bar-button-placeholder)').length
+                if (position === 'top' && tabCount === 1) {
+                    // Call in a timeout to allow the stortable start event to complete
+                    // processing - otherwise errors are thrown
+                    setTimeout(function () {
+                        tabBarButtonsContainer.sortable('cancel');
+                    }, 0);
+                }
                 const options = knownTabs[tabId];
                 options.tabButtonTooltip.delete()
                 draggingTabButton = true
@@ -584,6 +604,9 @@ RED.sidebar = (function() {
                 if (!skipShowSidebar && !RED.menu.isSelected(targetSidebar.menuToggle)) {
                     RED.menu.setSelected(targetSidebar.menuToggle,true);
                 }
+                if (targetSidebar.sections[targetSection].hidden) {
+                    targetSidebar.showSection(targetSection)
+                }
             }
         }
     }
@@ -604,11 +627,13 @@ RED.sidebar = (function() {
         sidebar.sections = {};
         sidebar.sections.top = {}
         sidebar.sections.top.container = $('<div class="red-ui-sidebar-section red-ui-sidebar-section-top"></div>').appendTo(sidebar.container);
+        // sidebar.sections.top.banner = $('<div class="red-ui-sidebar-banner">Head</div>').appendTo(sidebar.sections.top.container);
         sidebar.sections.top.content = $('<div class="red-ui-sidebar-content"></div>').appendTo(sidebar.sections.top.container);
         sidebar.sections.top.footer =  $('<div class="red-ui-sidebar-footer"></div>').appendTo(sidebar.sections.top.container);
         sidebar.sectionsSeparator = $('<div class="red-ui-sidebar-tab-bar-separator"><div class="red-ui-sidebar-separator-handle"></div></div>').appendTo(sidebar.container);
         sidebar.sections.bottom = {}
         sidebar.sections.bottom.container = $('<div class="red-ui-sidebar-section red-ui-sidebar-section-bottom"></div>').appendTo(sidebar.container);
+        // sidebar.sections.bottom.banner = $('<div class="red-ui-sidebar-banner">Head</div>').appendTo(sidebar.sections.bottom.container);
         sidebar.sections.bottom.content = $('<div class="red-ui-sidebar-content"></div>').appendTo(sidebar.sections.bottom.container);
         sidebar.sections.bottom.footer =  $('<div class="red-ui-sidebar-footer"></div>').appendTo(sidebar.sections.bottom.container);
 
@@ -616,12 +641,14 @@ RED.sidebar = (function() {
         let startTopSectionHeight
         let startTopTabSectionHeight
         let startSidebarHeight
+        let lastSeparatorPosition
         sidebar.sectionsSeparator.draggable({
             axis: "y",
             containment: sidebar.container,
             scroll: false,
             start:function(event,ui) {
                 startPosition = ui.position.top
+                lastSeparatorPosition = ui.position.top
                 startTopSectionHeight = sidebar.sections.top.container.outerHeight()
                 startTopTabSectionHeight = sidebar.tabBars.top.container.outerHeight()
                 startSidebarHeight = sidebar.container.height()
@@ -631,12 +658,13 @@ RED.sidebar = (function() {
                 const newTopHeight = startTopSectionHeight + delta
                 const newBottomHeight = startSidebarHeight - newTopHeight
                 if (newTopHeight < 100 || newBottomHeight < 100) {
-                    ui.position.top += delta
+                    ui.position.top = lastSeparatorPosition
                     return
                 }
                 sidebar.sections.top.container.outerHeight(startTopSectionHeight + delta)
                 sidebar.tabBars.top.container.outerHeight(startTopTabSectionHeight + delta)
                 ui.position.top -= delta
+                lastSeparatorPosition = ui.position.top
                 sidebar.resizeSidebar()
             },
             stop:function(event,ui) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js
index 816824716..18d5b06d9 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js
@@ -43,7 +43,6 @@ RED.sidebar.info.outliner = (function() {
         subflowList = flowData[1];
         globalConfigNodes = flowData[2];
         configNodeTypes = { __global__: globalConfigNodes};
-
         return flowData;
     }
 
@@ -222,8 +221,6 @@ RED.sidebar.info.outliner = (function() {
                 }
                 return RED._("common.label."+(((n.type==='tab' && n.disabled) || (n.type!=='tab' && n.d))?"enable":"disable"));
             });
-        } else {
-            $('<div class="red-ui-info-outline-item-control-spacer">').appendTo(controls)
         }
         if (n.type === 'tab') {
             var lockToggleButton = $('<button type="button" class="red-ui-info-outline-item-control-lock red-ui-button red-ui-button-small"><i class="fa fa-unlock-alt"></i><i class="fa fa-lock"></i></button>').appendTo(controls).on("click",function(evt) {
@@ -238,7 +235,7 @@ RED.sidebar.info.outliner = (function() {
             RED.popover.tooltip(lockToggleButton,function() {
                 return RED._("common.label."+(n.locked?"unlock":"lock"));
             });
-        } else {
+        } else if (n.type !== 'subflow') {
             $('<div class="red-ui-info-outline-item-control-spacer">').appendTo(controls)
         }
         controls.find("button").on("dblclick", function(evt) {
@@ -297,7 +294,8 @@ RED.sidebar.info.outliner = (function() {
         // <div class="red-ui-info-outline-item red-ui-info-outline-item-flow" style=";"><div class="red-ui-search-result-description red-ui-info-outline-item-label">Space Monkey</div><div class="red-ui-info-outline-item-controls"><button class="red-ui-button red-ui-button-small" style="position:absolute;right:5px;"><i class="fa fa-ellipsis-h"></i></button></div></div></div>').appendTo(container)
 
         treeList = $("<div>").css({width: "100%"}).appendTo(container).treeList({
-            data:getFlowData()
+            data:getFlowData(),
+            expandOnLabel: false
         })
         treeList.on('treelistselect', function(e,item) {
             var node = RED.nodes.node(item.id) || RED.nodes.group(item.id) || RED.nodes.workspace(item.id) || RED.nodes.subflow(item.id);
@@ -591,14 +589,15 @@ RED.sidebar.info.outliner = (function() {
         }
     }
     function getGutter(n) {
-        var span = $("<span>",{class:"red-ui-info-outline-gutter red-ui-treeList-gutter-float"});
-        var revealButton = $('<button type="button" class="red-ui-info-outline-item-control-reveal red-ui-button red-ui-button-small"><i class="fa fa-search"></i></button>').appendTo(span).on("click",function(evt) {
-            evt.preventDefault();
-            evt.stopPropagation();
-            RED.view.reveal(n.id);
-        })
-        RED.popover.tooltip(revealButton,RED._("sidebar.info.find"));
-        return span;
+        // var span = $("<span>",{class:"red-ui-info-outline-gutter red-ui-treeList-gutter-float"});
+        // var revealButton = $('<button type="button" class="red-ui-info-outline-item-control-reveal red-ui-button red-ui-button-small"><i class="fa fa-search"></i></button>').appendTo(span).on("click",function(evt) {
+        //     evt.preventDefault();
+        //     evt.stopPropagation();
+        //     RED.view.reveal(n.id);
+        // })
+        // RED.popover.tooltip(revealButton,RED._("sidebar.info.find"));
+        // return span;
+        return null;
     }
 
     function createFlowConfigNode(parent,type) {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
index 098094f86..b5ce5404c 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
@@ -182,7 +182,7 @@ $diff-merge-header-color: #800080;
 $diff-merge-header-background: #e5f9ff;
 $diff-merge-header-border-color: #b2edff;
 
-$menuBackground: $primary-background;
+$menuBackground: $secondary-background;
 $menuDivider: $secondary-border-color;
 $menuColor: $primary-text-color;
 $menuActiveColor: $secondary-text-color-active;
@@ -247,29 +247,33 @@ $link-unknown-color: #f00;
 $clipboard-textarea-background: #F3E7E7;
 
 
+$header-background: $primary-background;
+$header-button-border: $primary-border-color;
+$header-button-background-active: $workspace-button-background-active;
+$header-accent: $primary-background;
+
+$header-menu-color: $primary-text-color;
+$header-menu-color-disabled: $secondary-text-color-disabled;
+$header-menu-heading-color:$primary-text-color;
+$header-menu-sublabel-color: $secondary-text-color-active;
+$header-menu-background: $menuBackground;
+$header-menu-item-hover: $secondary-background-hover;
+$header-menu-item-border-active: $secondary-background-hover;
+$headerMenuItemDivider: $secondary-border-color;
+$headerMenuCaret: $tertiary-text-color;
+
+
 $deploy-button-color: #eee;
 $deploy-button-color-active: #ccc;
-$deploy-button-color-disabled: #999;
+$deploy-button-color-disabled: $secondary-text-color-disabled;
+$deploy-button-border-color: $header-button-border;
 $deploy-button-background: #8C101C;
 $deploy-button-background-hover: #6E0A1E;
 $deploy-button-background-active: #4C0A17;
-$deploy-button-background-disabled:  #444;
-$deploy-button-background-disabled-hover: #555;
+$deploy-button-background-disabled:  $header-background;
+$deploy-button-background-disabled-hover: $secondary-background-hover;
 
 
-$header-background: #000;
-$header-button-background-active: #121212;
-$header-accent: #C02020;
-$header-menu-color: #eee;
-$header-menu-color-disabled: #666;
-$header-menu-heading-color: #fff;
-$header-menu-sublabel-color: #aeaeae;
-$header-menu-background: #121212;
-$header-menu-item-hover: #323232;
-$header-menu-item-border-active: #777677;
-$headerMenuItemDivider: #464646;
-$headerMenuCaret: #C7C7C7;
-
 $vcCommitShaColor: #c38888;
 
 $dnd-background: rgba(0,0,0,0.3);
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 f6a2d6fde..061faf82c 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
@@ -30,7 +30,8 @@
     list-style: none;
     background: var(--red-ui-menuBackground);
     border: 1px solid var(--red-ui-secondary-border-color);
-    box-shadow: 0 5px 10px var(--red-ui-shadow);
+    border-radius: 4px;
+    box-shadow: -2px 2px 6px 2px var(--red-ui-shadow);
 
     &.pull-right {
         right: 0;
@@ -163,7 +164,7 @@
     position: relative;
     & > .red-ui-menu-dropdown {
         top: 0;
-        left: calc(100% - 5px);
+        left: calc(100%);
         margin-top: 0;
         margin-left: -1px;
     }
@@ -187,8 +188,7 @@
     &.pull-left {
         float: none;
         & > .red-ui-menu-dropdown {
-            left: -100%;
-            margin-left: 10px;
+            left: calc(-100% - 2px);
         }
     }
 }
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 ed8de3165..0bc789974 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
@@ -28,31 +28,29 @@
     height: var(--red-ui-header-height);
     background: var(--red-ui-header-background);
     box-sizing: border-box;
-    padding: 0px 0px 0px 20px;
+    padding: 0px;
     color: var(--red-ui-header-menu-color);
     font-size: 14px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 2px solid var(--red-ui-header-accent);
-    padding-top: 2px;
+    padding-top: 6px;
 
     span.red-ui-header-logo {
         float: left;
-        font-size: 30px;
-        line-height: 30px;
+        margin-left: 8px;
         text-decoration: none;
         white-space: nowrap;
 
         span {
             vertical-align: middle;
-            font-size: 16px !important;
+            font-size: 14px !important;
             &:not(:first-child) {
                 margin-left: 8px;
             }
         }
         img {
-            height: 32px;
+            height: 28px;
         }
 
         a {
@@ -68,9 +66,9 @@
         display: flex;
         align-items: stretch;
         padding: 0;
-        margin: 0;
+        margin: 0 10px 0 0;
         list-style: none;
-        float: right;
+        gap: 15px;
 
         > li {
             display: inline-flex;
@@ -82,24 +80,20 @@
     }
 
     .button {
-        height: 100%;
+        height: 24px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        min-width: 20px;
+        min-width: 24px;
         text-align: center;
-        font-size: 20px;
-        padding: 0px 12px;
+        font-size: 16px;
+        padding: 0px;
         text-decoration: none;
         color: var(--red-ui-header-menu-color);
-        margin: auto 5px;
+        margin: auto 0;
         vertical-align: middle;
-        border-left: 2px solid var(--red-ui-header-background);
-        border-right: 2px solid var(--red-ui-header-background);
+        mask-size: contain;
 
-        &:hover {
-            border-color: var(--red-ui-header-menu-item-hover);
-        }
         &:active, &.active {
             background: var(--red-ui-header-button-background-active);
         }
@@ -110,7 +104,6 @@
 
     .button-group {
         display: inline-block;
-        margin: auto 15px;
         vertical-align: middle;
         clear: both;
         & > a {
@@ -128,7 +121,7 @@
     .red-ui-deploy-button {
         background: var(--red-ui-deploy-button-background);
         color: var(--red-ui-deploy-button-color);
-
+        border: 1px solid var(--red-ui-deploy-button-border-color);
         &:hover {
             background: var(--red-ui-deploy-button-background-hover);
         }
@@ -156,18 +149,24 @@
     }
 
     #red-ui-header-button-deploy {
-        padding: 4px 12px;
+        padding: 3px 8px;
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+        border-right: none;
+        border-color: var(--red-ui-deploy-button-background);
+
         &.disabled {
             cursor: default;
             background: var(--red-ui-deploy-button-background-disabled);
             color: var(--red-ui-deploy-button-color-disabled);
-
+            border-color: var(--red-ui-deploy-button-border-color);
             .red-ui-deploy-button-content>img {
-                opacity: 0.3;
+                opacity: 0.7;
             }
             &+ #red-ui-header-button-deploy-options {
                 background: var(--red-ui-deploy-button-background-disabled);
                 color: var(--red-ui-deploy-button-color-active);
+                border-color: var(--red-ui-deploy-button-border-color);
             }
             &+ #red-ui-header-button-deploy-options:hover {
                 background: var(--red-ui-deploy-button-background-disabled-hover);
@@ -176,9 +175,17 @@
                 background: var(--red-ui-deploy-button-background-disabled);
             }
         }
+        &+ #red-ui-header-button-deploy-options {
+            padding: 3px 4px;
+            border-top-right-radius: 4px;
+            border-bottom-right-radius: 4px;
+            border-left: none;
+            border-color: var(--red-ui-deploy-button-background);
+        }
 
         .red-ui-deploy-button-content>img {
             margin-right: 8px;
+            height: 16px;
         }
     }
 
@@ -212,7 +219,7 @@
         background: var(--red-ui-header-menu-background);
         border: 1px solid var(--red-ui-header-menu-background);
         width: 260px !important;
-        margin-top: 0;
+        margin-top: 5px;
         li a {
             color: var(--red-ui-header-menu-color);
             padding: 3px 10px 3px 30px;
@@ -295,10 +302,10 @@
 
 .red-ui-user-profile {
     background-color: var(--red-ui-header-background);
-    border: 2px solid var(--red-ui-header-menu-color);
+    border: 1px solid var(--red-ui-header-button-border);
     border-radius: 30px;
     overflow: hidden;
-
+    padding: 3px;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: contain;
@@ -306,9 +313,9 @@
     justify-content: center;
     align-items: center;
     vertical-align: middle;
-    width: 30px;
-    height: 30px;
-    font-size: 20px;
+    width: 22px;
+    height: 22px;
+    font-size: 14px;
 
     &.red-ui-user-profile-color-1 {
         background-color: var(--red-ui-user-profile-colors-1);
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sizes.scss b/packages/node_modules/@node-red/editor-client/src/sass/sizes.scss
index a3d48e76d..ecefc0294 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/sizes.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/sizes.scss
@@ -14,4 +14,4 @@
  * limitations under the License.
  **/
 
- $header-height: 48px;
\ No newline at end of file
+ $header-height: 36px;
\ No newline at end of file
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
index a8fc62446..5af00579f 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
@@ -423,7 +423,7 @@ div.red-ui-info-table {
 
 .red-ui-info-outline-item-control-spacer {
     display: inline-block;
-    width: 23px;
+    width: 18px;
 }
 .red-ui-info-outline-gutter {
     display:none;
@@ -442,9 +442,18 @@ div.red-ui-info-table {
     right: 1px;
     padding: 1px 2px 0 1px;
     text-align: right;
+    
 
     &.red-ui-info-outline-item-hover-controls button {
-        min-width: 23px;
+        margin: 0;
+        padding: 0 2px;
+        min-width: 18px;
+        height: 18px;
+        border-radius: 4px;
+        line-height: 0;
+        i {
+            font-size: 8px;
+        }
     }
 
     .red-ui-treeList-label:not(:hover) &.red-ui-info-outline-item-hover-controls {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/variables.scss b/packages/node_modules/@node-red/editor-client/src/sass/variables.scss
index 9f34d8fde..56379bded 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/variables.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/variables.scss
@@ -239,6 +239,7 @@
     --red-ui-deploy-button-color: #{colors.$deploy-button-color};
     --red-ui-deploy-button-color-active: #{colors.$deploy-button-color-active};
     --red-ui-deploy-button-color-disabled: #{colors.$deploy-button-color-disabled};
+    --red-ui-deploy-button-border-color: #{colors.$deploy-button-border-color};
     --red-ui-deploy-button-background: #{colors.$deploy-button-background};
     --red-ui-deploy-button-background-hover: #{colors.$deploy-button-background-hover};
     --red-ui-deploy-button-background-active: #{colors.$deploy-button-background-active};
@@ -249,6 +250,7 @@
     --red-ui-header-background: #{colors.$header-background};
     --red-ui-header-accent: #{colors.$header-accent};
     --red-ui-header-button-background-active: #{colors.$header-button-background-active};
+    --red-ui-header-button-border: #{colors.$header-button-border};
     --red-ui-header-menu-color: #{colors.$header-menu-color};
     --red-ui-header-menu-color-disabled: #{colors.$header-menu-color-disabled};
     --red-ui-header-menu-heading-color: #{colors.$header-menu-heading-color};