Skip to content

Commit 4a4f38f

Browse files
committed
Fix mobile input bar rendering ~3 lines tall with the prompt/text misaligned
#cmd uses white-space:pre (needed to preserve the editable content's exact spacing), which also preserves any literal whitespace that's a direct text- node child of #cmd -- and the pretty-printed HTML had a newline+indentation before the first <span> and another before <textarea>. Those became real rendered blank/indented lines, inflating the input bar to ~3 line-heights (~116px on an iPhone-width viewport, measured) instead of one, with the placeholder text appearing indented on a lower "line" than the "> " prompt beside it -- looked like two disconnected prompts stacked vertically. Collapsed the div to a single line with no inter-element whitespace. Also matched #inputbar .prompt's font-size to #cmd's mobile 16px (previously 14px) so the prompt and input text share a baseline instead of sitting at visibly different sizes on the same row. Reproduced live via a route-intercepted Playwright session against the production site's own driver assets (bar height 115.75px before, 46.19px after) and confirmed against a plain local serve of the file (same before/ after numbers), not just reasoned from the CSS.
1 parent 182679a commit 4a4f38f

1 file changed

Lines changed: 6 additions & 8 deletions

File tree

scripts/web_shell_override/index.html

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -296,7 +296,10 @@
296296
#tabs .tab { padding: 10px 10px 8px; font-size: 12.5px; }
297297
#term, #logs { padding: 5px 6px; }
298298
#logs { font-size: 13px; }
299-
#inputbar .prompt { padding: 10px 0 10px 12px; }
299+
/* font-size matches #cmd below -- .prompt and the input text share a
300+
baseline, so a size mismatch here reads as the two being on
301+
different lines even though they're the same flex row. */
302+
#inputbar .prompt { padding: 10px 0 10px 12px; font-size: 16px; }
300303
#cmd {
301304
padding: 11px 12px 11px 6px;
302305
/* >=16px stops iOS Safari's auto-zoom-on-focus (see pointer:coarse
@@ -310,7 +313,7 @@
310313
rather than width, since any touchscreen (including a wide tablet in
311314
landscape) hits both problems this addresses. */
312315
@media (pointer: coarse) {
313-
#cmd { font-size: 16px; }
316+
#cmd, #inputbar .prompt { font-size: 16px; }
314317
#tabs .tab { min-height: 40px; }
315318
#tabs .tab .reload, #tabs .tab .close {
316319
display: inline-flex; align-items: center; justify-content: center;
@@ -408,12 +411,7 @@ <h1>FluffOS / WebAssembly</h1>
408411
<canvas id="jscanvas" width="300" height="130"></canvas>
409412
<div id="inputbar">
410413
<span class="prompt">&gt;</span>
411-
<div id="cmd">
412-
<span id="cmdPlaceholder" class="cmd-placeholder"></span><span id="cmdBefore" class="cmd-text"></span><span id="cmdCaret" class="cmd-caret"></span><span id="cmdAfter" class="cmd-text"></span>
413-
<textarea id="cmdReal" rows="1" autocomplete="off" autocapitalize="off"
414-
autocorrect="off" spellcheck="false" enterkeyhint="send"
415-
autofocus disabled></textarea>
416-
</div>
414+
<div id="cmd"><span id="cmdPlaceholder" class="cmd-placeholder"></span><span id="cmdBefore" class="cmd-text"></span><span id="cmdCaret" class="cmd-caret"></span><span id="cmdAfter" class="cmd-text"></span><textarea id="cmdReal" rows="1" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" enterkeyhint="send" autofocus disabled></textarea></div>
417415
</div>
418416

419417
<div id="errorModal" class="modal-overlay" hidden>

0 commit comments

Comments
 (0)