From bbaa922dd0a01b6063fb3e65c3e4707e954e3fdf Mon Sep 17 00:00:00 2001
From: Noley Holland <hollandnoley@gmail.com>
Date: Tue, 3 Mar 2026 07:16:20 -0800
Subject: [PATCH] Update styling of tabs to floating active tab and ghost
 inactive tabs

---
 .../editor-client/src/sass/tabs.scss          | 51 +++++++++++++++++--
 1 file changed, 48 insertions(+), 3 deletions(-)

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 2a94fefa3..868525cfb 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
@@ -488,13 +488,58 @@ i.red-ui-tab-icon {
         display: flex;
         align-items: center;
         border: none;
+        gap: 2px; 
+        
         li {
             min-width: 60px;
             max-width: 150px;
             flex: 1 1 100%;
-            border-color: var(--red-ui-header-button-border);
-            border-radius: 4px;
-            margin-top: 0;
+            border-color: transparent;
+            margin: 0;
+            background: transparent;
+
+            a.red-ui-tab-label {
+                padding-left: 0;
+                text-align: center;
+            }
+
+            &:not(.active) .red-ui-tabs-fade {
+                display: none;
+            }
+
+            &:not(.active) {
+                border-radius: 0;
+            }
+
+            &:not(:first-child):not(.active) {
+                box-shadow: -1px 0 0 rgba(0,0,0,0.15);
+            }
+
+            &:not(:first-child):not(.active):hover,
+            &.active + li:not(:first-child),
+            &:hover + li:not(:first-child):not(.active) {
+                box-shadow: none;
+            }
+
+            &.active {
+                background: var(--red-ui-secondary-background);
+                box-shadow: 0 1px 4px rgba(0,0,0,0.15);
+                border-color: var(--red-ui-primary-border-color);
+                border-radius: 4px;
+            }
+
+            &:not(.active):hover::after {
+                content: '';
+                position: absolute;
+                inset: 0 0 0 1px;
+                background: rgba(0,0,0,0.06);
+                border-radius: 4px;
+                pointer-events: none;
+            }
+
+            &:not(.active) a:hover {
+                background: transparent;
+            }
         }
     }
 }