From 9e5218f6b4b14a3b95d7091808bd68ecc544f614 Mon Sep 17 00:00:00 2001
From: Mauricio Bonani <bonanitech@gmail.com>
Date: Tue, 10 Aug 2021 14:21:54 -0400
Subject: [PATCH 1/2] Place close tab link in front of fade

---
 .../@node-red/editor-client/src/js/ui/common/tabs.js          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 0dfb72ffd..41c6e704c 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
@@ -664,6 +664,8 @@ RED.tabs = (function() {
                 link.on("dblclick", function(evt) { evt.stopPropagation(); evt.preventDefault(); })
 
 
+                $('<span class="red-ui-tabs-fade"></span>').appendTo(li);
+
                 if (tab.closeable) {
                     li.addClass("red-ui-tabs-closeable")
                     var closeLink = $("<a/>",{href:"#",class:"red-ui-tab-close"}).appendTo(li);
@@ -674,8 +676,6 @@ 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);

From e93734b209a8986d44daeaf30e89226b68c57dfb Mon Sep 17 00:00:00 2001
From: Mauricio Bonani <bonanitech@gmail.com>
Date: Tue, 10 Aug 2021 14:26:41 -0400
Subject: [PATCH 2/2] Change fade color when hovering an inactive tab

---
 .../node_modules/@node-red/editor-client/src/sass/tabs.scss    | 3 +++
 1 file changed, 3 insertions(+)

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 662aaa6ae..0b038932a 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
@@ -131,6 +131,9 @@
             &:not(.active) a:hover {
                 color: $workspace-button-color-hover;
                 background: $tab-background-hover;
+                &+.red-ui-tabs-fade {
+                    background-image: linear-gradient(to right, change-color($tab-background-hover, $alpha: 0.001), $tab-background-hover);
+                }
             }
         }
     }