From 3aff62176619d77a105ca2c8a59a424f8b34a478 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Sun, 14 Jun 2026 15:41:13 -0400
Subject: [PATCH] =?UTF-8?q?repl:=20prompt-bar=20position:=20sticky=20botto?=
 =?UTF-8?q?m=20=E2=80=94=20connected=20to=20output,=20sticks=20only=20at?=
 =?UTF-8?q?=20viewport=20edge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 wasm/repl/repl.css | 11 +++++------
 www/repl/repl.css  | 11 +++++------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/wasm/repl/repl.css b/wasm/repl/repl.css
index e476dac..6cc0a75 100644
--- a/wasm/repl/repl.css
+++ b/wasm/repl/repl.css
@@ -182,8 +182,6 @@ body.repl {
   display: grid;
   grid-template-rows: auto auto auto;
   align-content: start;
-  /* Leave room for the fixed prompt bar at the viewport bottom. */
-  padding-bottom: calc(3.6rem + env(safe-area-inset-bottom, 0));
 }
 .transcript {
   font-family: var(--mono);
@@ -234,16 +232,17 @@ body.repl {
 /* ─── Prompt bar ───────────────────────────────────────────────── */
 
 .prompt-bar {
-  position: fixed;
-  left: 0; right: 0; bottom: 0;
+  /* Flows directly under the last transcript entry — connected, no gap.
+   * Sticks to the viewport bottom once the page scrolls past it. */
+  position: sticky;
+  bottom: 0;
   z-index: 50;
   display: grid;
   grid-template-columns: auto 1fr auto auto;
   gap: 0.4rem;
   align-items: center;
-  padding: 0.5rem 1rem;
+  padding: 0.3rem 0 0.5rem;
   background: var(--code-bg);
-  border-top: 1px solid var(--rule);
 }
 .prompt-bar .prompt-sigil {
   color: var(--green);
diff --git a/www/repl/repl.css b/www/repl/repl.css
index e476dac..6cc0a75 100644
--- a/www/repl/repl.css
+++ b/www/repl/repl.css
@@ -182,8 +182,6 @@ body.repl {
   display: grid;
   grid-template-rows: auto auto auto;
   align-content: start;
-  /* Leave room for the fixed prompt bar at the viewport bottom. */
-  padding-bottom: calc(3.6rem + env(safe-area-inset-bottom, 0));
 }
 .transcript {
   font-family: var(--mono);
@@ -234,16 +232,17 @@ body.repl {
 /* ─── Prompt bar ───────────────────────────────────────────────── */
 
 .prompt-bar {
-  position: fixed;
-  left: 0; right: 0; bottom: 0;
+  /* Flows directly under the last transcript entry — connected, no gap.
+   * Sticks to the viewport bottom once the page scrolls past it. */
+  position: sticky;
+  bottom: 0;
   z-index: 50;
   display: grid;
   grid-template-columns: auto 1fr auto auto;
   gap: 0.4rem;
   align-items: center;
-  padding: 0.5rem 1rem;
+  padding: 0.3rem 0 0.5rem;
   background: var(--code-bg);
-  border-top: 1px solid var(--rule);
 }
 .prompt-bar .prompt-sigil {
   color: var(--green);