Make the output window scrollable

Author: ablzh

src/main.js

@@ -139,9 +139,13 @@ document.getElementById('btn-play').addEventListener('click', async () => {
     // We want the string content.
     const output = result.toString();
     outputDiv.innerText = output;
+    // Auto-scroll to bottom
+    outputDiv.scrollTop = outputDiv.scrollHeight;
   } catch (e) {
     console.error(e);
     outputDiv.innerText = "Execution Error: " + (e.message || e);
+    // Auto-scroll to bottom
+    outputDiv.scrollTop = outputDiv.scrollHeight;
   }
 });
 

style.css

@@ -84,19 +84,23 @@ body {
   flex-direction: column;
   height: 100%;
   min-width: 0;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .pane-header {
   margin-bottom: 8px;
   font-weight: bold;
   font-size: 1rem;
+  flex-shrink: 0; /* Prevent header from shrinking */
 }
 
 .monaco-container {
   flex: 1;
   border: 1px solid #445566;
   border-radius: 4px;
   overflow: hidden;
+  min-height: 0;
 }
 
 .output-container {
@@ -106,10 +110,9 @@ body {
   border-radius: 4px;
   padding: 10px;
   font-family: 'Courier New', Courier, monospace;
-  overflow-y: auto;
-  white-space: pre-wrap;
-  display: flex;
-  flex-direction: column;
+  overflow: auto; /* Allow both vertical and horizontal scroll */
+  white-space: pre; /* Do not wrap text */
+  min-height: 0; /* Crucial for scrolling in flex container */
 }
 
 .initial-state {