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

repl: baseline-align λ> sigil with input text in prompt-bar

Browse source 
Previously align-items: center centered the textarea while the sigil
sat top-aligned with padding-top — single-line input rendered the
sigil visibly higher than the input baseline (see screenshots from
07-52-55 and 07-53-20). Now:

  * .prompt-bar uses align-items: baseline so the sigil's text
    baseline tracks the textarea's first-line baseline in both 1-line
    and N-line cases.
  * .prompt-sigil shrinks font-size from 0.95em to 0.92em (matching
    the textarea) so cap-height differences don't push baselines
    apart.
  * line-height: 1.4 pinned on both so baseline geometry stays
    predictable (browser default for textarea is 'normal' which
    varies per-font).
This commit is contained in:
russell@unturf.com 2026-06-15 07:56:46 -04:00
parent 5de290c662
commit ad407d25a8
No known key found for this signature in database
3 changed files with 54 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

26
wasm/dist-repl/repl.css
View file

@ -302,20 +302,25 @@ body.repl {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 0.4rem;
align-items: center;
/* Baseline-align: sigil glyph sits on the textarea's first-line
* baseline whether the textarea is 1 row or 40. Center alignment
* with top-aligned sigil drifts visibly off the input baseline on
* single-line input; top alignment without baseline drifts the
* sigil ABOVE the input. Baseline tracks the first line in either
* case, which is what the eye expects from a prompt. */
align-items: baseline;
padding: 0.3rem 0.4rem 0.5rem;
background: var(--code-bg);
}
.prompt-bar .prompt-sigil {
color: var(--green);
font-weight: 600;
font-size: 0.95em;
/* Top-align so multi-line input keeps λ> on the first line instead
* of drifting to vertical-center as the textarea grows. The padding
* matches the textarea's padding-top so the sigil sits on the same
* baseline as the first character. */
align-self: start;
padding-top: 0.4rem;
/* Match textarea font metrics so the baselines actually line up;
* a larger sigil font would push its baseline higher than the
* textarea's by the cap-height difference. */
font-family: var(--mono);
font-size: 0.92em;
line-height: 1.4;
}
.prompt-bar textarea {
resize: none;
@ -325,6 +330,11 @@ body.repl {
padding: 0.25rem 0;
font-family: var(--mono);
font-size: 0.92em;
/* Pin line-height so multi-line content + sigil baseline alignment
* stay predictable. Browser default for textarea is 'normal' which
* varies per font; matching .prompt-sigil keeps both baselines on
* the same grid line. */
line-height: 1.4;
min-height: 1.5em;
max-height: 30vh;
min-width: 0;

26
wasm/repl/repl.css
View file

@ -302,20 +302,25 @@ body.repl {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 0.4rem;
align-items: center;
/* Baseline-align: sigil glyph sits on the textarea's first-line
* baseline whether the textarea is 1 row or 40. Center alignment
* with top-aligned sigil drifts visibly off the input baseline on
* single-line input; top alignment without baseline drifts the
* sigil ABOVE the input. Baseline tracks the first line in either
* case, which is what the eye expects from a prompt. */
align-items: baseline;
padding: 0.3rem 0.4rem 0.5rem;
background: var(--code-bg);
}
.prompt-bar .prompt-sigil {
color: var(--green);
font-weight: 600;
font-size: 0.95em;
/* Top-align so multi-line input keeps λ> on the first line instead
* of drifting to vertical-center as the textarea grows. The padding
* matches the textarea's padding-top so the sigil sits on the same
* baseline as the first character. */
align-self: start;
padding-top: 0.4rem;
/* Match textarea font metrics so the baselines actually line up;
* a larger sigil font would push its baseline higher than the
* textarea's by the cap-height difference. */
font-family: var(--mono);
font-size: 0.92em;
line-height: 1.4;
}
.prompt-bar textarea {
resize: none;
@ -325,6 +330,11 @@ body.repl {
padding: 0.25rem 0;
font-family: var(--mono);
font-size: 0.92em;
/* Pin line-height so multi-line content + sigil baseline alignment
* stay predictable. Browser default for textarea is 'normal' which
* varies per font; matching .prompt-sigil keeps both baselines on
* the same grid line. */
line-height: 1.4;
min-height: 1.5em;
max-height: 30vh;
min-width: 0;

26
www/repl/repl.css
View file

@ -302,20 +302,25 @@ body.repl {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 0.4rem;
align-items: center;
/* Baseline-align: sigil glyph sits on the textarea's first-line
* baseline whether the textarea is 1 row or 40. Center alignment
* with top-aligned sigil drifts visibly off the input baseline on
* single-line input; top alignment without baseline drifts the
* sigil ABOVE the input. Baseline tracks the first line in either
* case, which is what the eye expects from a prompt. */
align-items: baseline;
padding: 0.3rem 0.4rem 0.5rem;
background: var(--code-bg);
}
.prompt-bar .prompt-sigil {
color: var(--green);
font-weight: 600;
font-size: 0.95em;
/* Top-align so multi-line input keeps λ> on the first line instead
* of drifting to vertical-center as the textarea grows. The padding
* matches the textarea's padding-top so the sigil sits on the same
* baseline as the first character. */
align-self: start;
padding-top: 0.4rem;
/* Match textarea font metrics so the baselines actually line up;
* a larger sigil font would push its baseline higher than the
* textarea's by the cap-height difference. */
font-family: var(--mono);
font-size: 0.92em;
line-height: 1.4;
}
.prompt-bar textarea {
resize: none;
@ -325,6 +330,11 @@ body.repl {
padding: 0.25rem 0;
font-family: var(--mono);
font-size: 0.92em;
/* Pin line-height so multi-line content + sigil baseline alignment
* stay predictable. Browser default for textarea is 'normal' which
* varies per font; matching .prompt-sigil keeps both baselines on
* the same grid line. */
line-height: 1.4;
min-height: 1.5em;
max-height: 30vh;
min-width: 0;