autoscroll

src/css/terminal.css

@@ -1,7 +1,7 @@
 :root {
     --cli-spacing-vertical: 5px;
     --cli-spacing-horizontal: 5px;
-    --cli-margin: 10px 0 0 25px;
+    --cli-margin: 5px 0 0 25px;
     --cli-font-size: 20px;
     --cli-height: 30px;
     --cli-status-width: 8px;
@@ -20,7 +20,7 @@
 
 #command-prompt {
     position: absolute;
-    top: 10px;
+    top: 5px;
 }
 
 #command-textbox {
@@ -75,11 +75,17 @@
 /* The scrollback shows your previous inputs and outputs. */
 
 #scrollback {
+    overflow-y: auto;
     margin: 0;
     padding: 0;
+    max-height: 95vh;
     font-size: var(--cli-font-size);
 }
 
+[data-mode="cinema"] #scrollback {
+    max-height: 505px;
+}
+
 #scrollback li {
     list-style: none;
     margin: 0;

src/js/commands.ts

@@ -3,6 +3,7 @@
 
 import { scrollback } from "./dom.js"
 import { resize } from "./resize.js"
+import { autoScroll } from "./scrollback.js"
 
 export const commands: string[] = []
 
@@ -13,6 +14,7 @@ export const browserCommands: Record<string, () => any> = {
   mode: () => {
     document.body.dataset.mode = document.body.dataset.mode === "tall" ? "cinema" : "tall"
     resize()
+    autoScroll()
   }
 }
 

src/js/scrollback.ts

@@ -44,4 +44,11 @@ export function addOutput(id: string, output: string) {
     item.dataset.id = id
 
     scrollback.append(item)
+    autoScroll()
+}
+
+export function autoScroll() {
+    setTimeout(() => {
+        requestAnimationFrame(() => scrollback.scrollTop = scrollback.scrollHeight)
+    }, 10)
 }