no more scrollback

app/src/css/terminal.css

@@ -107,6 +107,7 @@
 
 
 /* The scrollback shows your previous inputs and outputs. */
+
 #scrollback {
     overflow: auto;
 
@@ -119,7 +120,13 @@
     overflow-y: auto;
     margin: 0;
     padding: 0;
-    max-height: 95vh;
+
+    /* max-height: 95vh; */
+    height: 95vh;
+
+    /* Adjust 1.5em to match your line height */
+    padding-bottom: calc(95vh - 1.5em);
+
     font-size: var(--cli-font-size);
 }
 
@@ -129,7 +136,8 @@
 }
 
 [data-mode="cinema"] #scrollback {
-    max-height: 505px;
+    height: 505px;
+    padding-bottom: calc(505px - 1.5em);
 }
 
 #scrollback li {

app/src/js/game.ts

@@ -1,9 +1,9 @@
 import type { Message } from "../shared/types.js"
 import { GameContext, type InputState } from "../shared/game.js"
 import { focusInput } from "./focus.js"
-import { $$, scrollback } from "./dom.js"
+import { $$ } from "./dom.js"
 import { randomId } from "../shared/utils.js"
-import { setStatus, addOutput } from "./scrollback.js"
+import { setStatus, addOutput, insert } from "./scrollback.js"
 import { browserCommands } from "./commands.js"
 
 const FPS = 30
@@ -153,7 +153,7 @@ function endGame() {
 
   const output = $$("li.output")
   output.append(canvas)
-  scrollback.append(output)
+  insert(output)
 
   focusInput()
 }

app/src/js/scrollback.ts

@@ -2,16 +2,19 @@
 // The scrollback shows your history of interacting with the shell.
 // input, output, etc
 
-import { scrollback, $$ } from "./dom.js"
+import { scrollback, $, $$ } from "./dom.js"
 import { randomId } from "../shared/utils.js"
 import type { CommandOutput } from "../shared/types.js"
 
 type InputStatus = "waiting" | "streaming" | "ok" | "error"
 
 export function autoScroll() {
-    setTimeout(() => {
-        requestAnimationFrame(() => scrollback.scrollTop = scrollback.scrollHeight)
-    }, 10)
+    // requestAnimationFrame(() => scrollback.scrollTop = scrollback.scrollHeight - scrollback.clientHeight)
+    // scrollback.scrollTop = scrollback.scrollHeight - scrollback.clientHeight
+}
+
+export function insert(node: HTMLElement) {
+    scrollback.append(node)
 }
 
 export function addInput(id: string, input: string) {
@@ -21,7 +24,8 @@ export function addInput(id: string, input: string) {
     parent.append(status, content)
     parent.dataset.id = id
 
-    scrollback.append(parent)
+    insert(parent)
+    scrollback.scrollTop = scrollback.scrollHeight - scrollback.clientHeight
 }
 
 export function setStatus(id: string, status: InputStatus) {
@@ -62,7 +66,7 @@ export function addOutput(id: string, output: CommandOutput) {
     if (input instanceof HTMLLIElement)
         input.parentNode!.insertBefore(item, input.nextSibling)
     else
-        scrollback.append(item)
+        insert(item)
 
     autoScroll()
 }