engineering/lumbda
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

repl: prompt-bar position: sticky bottom — connected to output, sticks only at viewport edge

Browse source
This commit is contained in:
russell@unturf.com 2026-06-14 15:41:13 -04:00
parent 7ea65dba21
commit 3aff621766
No known key found for this signature in database
2 changed files with 10 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

11
wasm/repl/repl.css
View file

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

11
www/repl/repl.css
View file

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