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;