From e7efa76e6dfd83a02f64dc98637f083997d75f19 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 8 Jul 2021 12:23:15 +0100
Subject: [PATCH] Add a slight fade to tab labels that overflow

---
 .../editor-client/src/js/ui/common/tabs.js    |  4 ++++
 .../editor-client/src/sass/tabs.scss          | 20 +++++++++++++++++++
 2 files changed, 24 insertions(+)

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() {
                     });
                 }
 
+                $('<span class="red-ui-tabs-fade"></span>').appendTo(li);
+
                 var badges = $('<span class="red-ui-tabs-badges"></span>').appendTo(li);
                 if (options.onselect) {
                     $('<i class="red-ui-tabs-badge-changed fa fa-circle"></i>').appendTo(badges);
                     $('<i class="red-ui-tabs-badge-selected fa fa-check-circle"></i>').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 {