From 67932e954fd82c8b7c4002e582d5b2c14e7bc1f4 Mon Sep 17 00:00:00 2001
From: Chris Wanstrath <2+defunkt@users.noreply.github.com>
Date: Mon, 29 Sep 2025 16:14:55 -0700
Subject: [PATCH] no more scrollback

---
 app/src/css/terminal.css | 12 ++++++++++--
 app/src/js/game.ts       |  6 +++---
 app/src/js/scrollback.ts | 16 ++++++++++------
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/app/src/css/terminal.css b/app/src/css/terminal.css
index 252066d..98e85a1 100644
--- a/app/src/css/terminal.css
+++ b/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 {
diff --git a/app/src/js/game.ts b/app/src/js/game.ts
index 05d1968..60220aa 100644
--- a/app/src/js/game.ts
+++ b/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()
 }
\ No newline at end of file
diff --git a/app/src/js/scrollback.ts b/app/src/js/scrollback.ts
index 4bd8816..32fd0ba 100644
--- a/app/src/js/scrollback.ts
+++ b/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()
 }