diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
index f27eaa0d4..0dfb72ffd 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
@@ -674,11 +674,15 @@ RED.tabs = (function() {
});
}
+ $('').appendTo(li);
+
var badges = $('').appendTo(li);
if (options.onselect) {
$('').appendTo(badges);
$('').appendTo(badges);
}
+
+
if (options.onadd) {
options.onadd(tab);
}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
index 53358ac98..fc9c07406 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss
@@ -102,10 +102,21 @@
img.red-ui-tab-icon {
opacity: 0.2;
}
+
+ .red-ui-tabs-fade {
+ background-image: linear-gradient(to right, transparent, $tab-background-active);
+ }
+
}
&.selected {
&:not(.active) {
background: $tab-background-selected;
+ .red-ui-tabs-fade {
+ background-image: linear-gradient(to right, transparent, $tab-background-selected);
+ }
+ .red-ui-tabs-badge-selected {
+ background: $tab-background-selected;
+ }
}
font-weight: bold;
.red-ui-tabs-badge-selected {
@@ -291,6 +302,15 @@
.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search .red-ui-tabs-add {
right: 38px;
}
+.red-ui-tabs-fade {
+ position: absolute;
+ bottom: 0;
+ top: 0;
+ right: 0;
+ width: 15px;
+ background-image: linear-gradient(to right, transparent, $tab-background-inactive);
+ pointer-events: none;
+}
img.red-ui-tab-icon {