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);