From 1d0e82294b4136948c6006339600df98d1140f76 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Wed, 4 Mar 2026 11:56:51 -0800
Subject: [PATCH] fix: move [+] tab button next to open tabs, style as new-tab
 shape

- Remove flex:1 from .tabs-scroll so tabs don't stretch across full width
- [+] button sits immediately after last tab instead of far right
- Restyle .tab-add to match .tab shape (same border-radius, padding, hover)
- Push .tab-actions (view toggle) to far right with margin-left: auto
- Dropdown menu follows the button naturally

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

diff --git a/shared/components/rstack-tab-bar.ts b/shared/components/rstack-tab-bar.ts
index 926e697..644d6e8 100644
--- a/shared/components/rstack-tab-bar.ts
+++ b/shared/components/rstack-tab-bar.ts
@@ -1212,7 +1212,6 @@ const STYLES = `
   display: flex;
   align-items: center;
   gap: 2px;
-  flex: 1;
   min-width: 0;
   overflow-x: auto;
   overflow-y: visible;
@@ -1226,7 +1225,7 @@ const STYLES = `
   align-items: center;
   gap: 4px;
   flex-shrink: 0;
-  margin-left: 4px;
+  margin-left: auto;
 }
 
 /* ── Individual tab ── */
@@ -1318,7 +1317,7 @@ const STYLES = `
 .tab-add-wrap {
   position: relative;
   flex-shrink: 0;
-  margin-left: 4px;
+  margin-left: 2px;
   z-index: 1000;
 }
 
@@ -1326,25 +1325,24 @@ const STYLES = `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
-  min-width: 44px;
+  padding: 4px 12px;
   min-height: 44px;
-  border: 1px dashed var(--rs-border);
-  border-radius: 5px;
+  border: none;
+  border-radius: 6px 6px 0 0;
   background: transparent;
   color: var(--rs-text-muted);
-  font-size: 1rem;
+  font-size: 0.95rem;
   cursor: pointer;
-  transition: border-color 0.15s, color 0.15s, background 0.15s;
+  transition: background 0.15s, color 0.15s;
   flex-shrink: 0;
   -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
+  white-space: nowrap;
+  user-select: none;
 }
 .tab-add:hover, .tab-add:active {
-  border-color: #22d3ee;
-  color: #22d3ee;
-  background: rgba(34,211,238,0.08);
+  background: var(--rs-bg-hover);
+  color: var(--rs-text-primary);
 }
 
 /* ── Add menu ── */