From 3826d3b1c6e6202d87d333f2ac53f60ffbc3e11b Mon Sep 17 00:00:00 2001
From: Mauricio Bonani <bonanitech@gmail.com>
Date: Tue, 10 Mar 2026 08:04:35 -0400
Subject: [PATCH] Fix tab fade CSS

---
 .../@node-red/editor-client/src/sass/colors.scss     |  4 ----
 .../@node-red/editor-client/src/sass/tabs.scss       | 12 ++++--------
 .../@node-red/editor-client/src/sass/variables.scss  |  4 ----
 3 files changed, 4 insertions(+), 16 deletions(-)

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 38af32426..029e5745a 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
@@ -112,13 +112,9 @@ $tab-text-color-disabled-inactive: $secondary-text-color-disabled-inactive;
 $tab-badge-color: $tertiary-text-color;
 $tab-background: $secondary-background;
 $tab-background-active: $secondary-background;
-$tab-background-active-alpha: rgba($tab-background-active, 0.001);
 $tab-background-selected: $secondary-background-selected;
-$tab-background-selected-alpha: rgba($tab-background-selected, 0.001);
 $tab-background-inactive: $secondary-background-inactive;
-$tab-background-inactive-alpha: rgba($tab-background-inactive, 0.001);
 $tab-background-hover: $secondary-background-hover;
-$tab-background-hover-alpha: rgba($tab-background-hover, 0.001);
 
 $palette-header-background: $primary-background;
 $palette-header-color: $header-text-color;
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 f2905a77f..b260c70ab 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
@@ -116,7 +116,7 @@ body .red-ui-tabs {
                 }
 
                 .red-ui-tabs-fade {
-                    background-image: linear-gradient(to right, var(--red-ui-tab-background-active-alpha), var(--red-ui-tab-background-active));
+                    background-image: linear-gradient(to right, transparent, var(--red-ui-tab-background-active));
                 }
 
             }
@@ -124,7 +124,7 @@ body .red-ui-tabs {
                 &:not(.active) {
                     background: var(--red-ui-tab-background-selected);
                     .red-ui-tabs-fade {
-                        background-image: linear-gradient(to right, var(--red-ui-tab-background-selected-alpha), var(--red-ui-tab-background-selected));
+                        background-image: linear-gradient(to right, transparent, var(--red-ui-header-background));
                     }
                     .red-ui-tabs-badge-selected {
                         background: var(--red-ui-tab-background-selected);
@@ -144,7 +144,7 @@ body .red-ui-tabs {
                 color: var(--red-ui-workspace-button-color-hover);
                 background: var(--red-ui-tab-background-hover);
                 &+.red-ui-tabs-fade {
-                    background-image: linear-gradient(to right, var(--red-ui-tab-background-hover-alpha), var(--red-ui-tab-background-hover));
+                    background-image: linear-gradient(to right, transparent, var(--red-ui-header-background));
                 }
             }
         }
@@ -346,7 +346,7 @@ body .red-ui-tabs {
     top: 0;
     right: 0;
     width: 15px;
-    background-image: linear-gradient(to right, var(--red-ui-tab-background-inactive-alpha), var(--red-ui-tab-background-inactive));
+    background-image: linear-gradient(to right, transparent, var(--red-ui-header-background));
     pointer-events: none;
 }
 
@@ -514,10 +514,6 @@ i.red-ui-tab-icon {
                 }
             }
 
-            &:not(.active) .red-ui-tabs-fade {
-                display: none;
-            }
-
             &:not(.active) {
                 border-radius: 0;
             }
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 4e9459add..26ea6450e 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
@@ -105,13 +105,9 @@
     --red-ui-tab-badge-color: #{colors.$tab-badge-color};
     --red-ui-tab-background: #{colors.$tab-background};
     --red-ui-tab-background-active: #{colors.$tab-background-active};
-    --red-ui-tab-background-active-alpha: #{colors.$tab-background-active-alpha};
     --red-ui-tab-background-selected: #{colors.$tab-background-selected};
-    --red-ui-tab-background-selected-alpha: #{colors.$tab-background-selected-alpha};
     --red-ui-tab-background-inactive: #{colors.$tab-background-inactive};
-    --red-ui-tab-background-inactive-alpha: #{colors.$tab-background-inactive-alpha};
     --red-ui-tab-background-hover: #{colors.$tab-background-hover};
-    --red-ui-tab-background-hover-alpha: #{colors.$tab-background-hover-alpha};
 
     --red-ui-palette-header-background: #{colors.$palette-header-background};
     --red-ui-palette-header-color: #{colors.$palette-header-color};