From 7b397b522cd2e112fd85c00b40871cd8c3f8ec4e Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Wed, 4 Mar 2026 10:33:09 -0800
Subject: [PATCH] =?UTF-8?q?fix:=20[+]=20tab=20menu=20clipped=20by=20overfl?=
 =?UTF-8?q?ow=20=E2=80=94=20move=20outside=20scroll=20container?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The add-menu dropdown was inside .tabs-scroll which has overflow-x: auto,
causing the browser to clip overflow-y as well (per CSS spec). Move the
.tab-add-wrap (button + menu) out of .tabs-scroll into .tab-bar directly
so the dropdown renders without clipping, beneath the [+] button.

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

diff --git a/shared/components/rstack-tab-bar.ts b/shared/components/rstack-tab-bar.ts
index f2a320a..e44c908 100644
--- a/shared/components/rstack-tab-bar.ts
+++ b/shared/components/rstack-tab-bar.ts
@@ -293,10 +293,10 @@ export class RStackTabBar extends HTMLElement {
 			<div class="tab-bar" data-view="${this.#viewMode}">
 				<div class="tabs-scroll">
 					${this.#layers.map(l => this.#renderTab(l, active)).join("")}
-					<div class="tab-add-wrap">
-						<button class="tab-add" id="add-btn" title="Add layer">+</button>
-						${this.#addMenuOpen ? this.#renderAddMenu() : ""}
-					</div>
+				</div>
+				<div class="tab-add-wrap">
+					<button class="tab-add" id="add-btn" title="Add layer">+</button>
+					${this.#addMenuOpen ? this.#renderAddMenu() : ""}
 				</div>
 				<div class="tab-actions">
 					<button class="view-toggle ${this.#viewMode === "stack" ? "active" : ""}"