From e3aa39e1721f8dfa3d8a839887ce71a56b2b3b9d Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Sun, 14 Jun 2026 15:49:07 -0400
Subject: [PATCH] =?UTF-8?q?repl:=20sticky=20tabbar=20=E2=80=94=20header=20?=
 =?UTF-8?q?scrolls=20away,=20tabs=20stay=20pinned=20at=20viewport=20top?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 wasm/repl/repl.css | 14 ++++++++++----
 www/repl/repl.css  | 14 ++++++++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/wasm/repl/repl.css b/wasm/repl/repl.css
index 5cdc8c7..1b49179 100644
--- a/wasm/repl/repl.css
+++ b/wasm/repl/repl.css
@@ -113,14 +113,20 @@ body.repl {
 /* ─── Tab bar ──────────────────────────────────────────────────── */
 
 .tabbar {
+  /* Sticks to the top of the viewport so it stays visible after the
+   * header scrolls away — keeps the active-session controls reachable
+   * even after a long transcript pushes them off-screen. */
+  position: sticky;
+  top: 0;
+  z-index: 40;
   display: grid;
   grid-template-columns: auto auto 1fr auto auto auto auto;
   gap: 0.3rem;
   align-items: center;
-  padding: 0.2rem 0 0.4rem;
-  background: transparent;
-  border-bottom: 1px dashed var(--rule);
-  margin-bottom: 0.4rem;
+  padding: 0.4rem 1rem;
+  margin: 0 -1rem 0.4rem;          /* bleed to viewport edges */
+  background: var(--code-bg);
+  border-bottom: 1px solid var(--rule);
 }
 .tabs {
   display: grid;
diff --git a/www/repl/repl.css b/www/repl/repl.css
index 5cdc8c7..1b49179 100644
--- a/www/repl/repl.css
+++ b/www/repl/repl.css
@@ -113,14 +113,20 @@ body.repl {
 /* ─── Tab bar ──────────────────────────────────────────────────── */
 
 .tabbar {
+  /* Sticks to the top of the viewport so it stays visible after the
+   * header scrolls away — keeps the active-session controls reachable
+   * even after a long transcript pushes them off-screen. */
+  position: sticky;
+  top: 0;
+  z-index: 40;
   display: grid;
   grid-template-columns: auto auto 1fr auto auto auto auto;
   gap: 0.3rem;
   align-items: center;
-  padding: 0.2rem 0 0.4rem;
-  background: transparent;
-  border-bottom: 1px dashed var(--rule);
-  margin-bottom: 0.4rem;
+  padding: 0.4rem 1rem;
+  margin: 0 -1rem 0.4rem;          /* bleed to viewport edges */
+  background: var(--code-bg);
+  border-bottom: 1px solid var(--rule);
 }
 .tabs {
   display: grid;