From e2ebd11d756b0c05cc62d32ba3c784555811c2ce Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Wed, 4 Mar 2026 15:47:20 -0800
Subject: [PATCH] style: differentiate rApp tab headers with borders and
 spacing

Inactive tabs get a subtle background tint, hover/active tabs show
visible borders, active tab uses solid surface background. Wider gap
between tabs and full-width indicator line for clearer separation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 shared/components/rstack-tab-bar.ts | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/shared/components/rstack-tab-bar.ts b/shared/components/rstack-tab-bar.ts
index 644d6e8..81a1933 100644
--- a/shared/components/rstack-tab-bar.ts
+++ b/shared/components/rstack-tab-bar.ts
@@ -1211,7 +1211,7 @@ const STYLES = `
 .tabs-scroll {
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: 4px;
   min-width: 0;
   overflow-x: auto;
   overflow-y: visible;
@@ -1234,34 +1234,38 @@ const STYLES = `
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 4px 12px;
+  padding: 5px 12px;
   border-radius: 6px 6px 0 0;
   cursor: pointer;
   white-space: nowrap;
   font-size: 0.8rem;
   font-weight: 500;
-  transition: background 0.15s, opacity 0.15s;
+  transition: background 0.15s, opacity 0.15s, border-color 0.15s;
   user-select: none;
   position: relative;
   flex-shrink: 0;
   color: var(--rs-text-muted);
-  background: transparent;
+  background: rgba(255,255,255,0.03);
+  border: 1px solid transparent;
+  border-bottom: none;
 }
 .tab:hover {
   background: var(--rs-bg-hover);
   color: var(--rs-text-primary);
+  border-color: var(--rs-input-border);
 }
 .tab.active {
-  background: var(--rs-btn-secondary-bg);
+  background: var(--rs-bg-surface);
   color: var(--rs-text-primary);
+  border-color: var(--rs-input-border);
 }
 
 /* Active indicator line at bottom */
 .tab-indicator {
   position: absolute;
-  bottom: 0;
-  left: 8px;
-  right: 8px;
+  bottom: -1px;
+  left: 0;
+  right: 0;
   height: 2px;
   border-radius: 2px 2px 0 0;
   opacity: 0;