fix(demo): improve terminal resizing to fit container (#58)

sreya · web-flow · commit 2c9ea322f5db · 2025-11-25T10:27:26.000-05:00
diff --git a/demo/bin/demo.js b/demo/bin/demo.js
@@ -160,11 +160,16 @@ const HTML_TEMPLATE = `<!doctype html>
         padding: 0;
         min-height: 400px;
         height: 60vh;
+        position: relative;
       }
 
       #terminal {
-        width: 100%;
-        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
       }
     </style>
   </head>
@@ -203,6 +208,7 @@ const HTML_TEMPLATE = `<!doctype html>
       const container = document.getElementById('terminal');
       await term.open(container);
       fitAddon.fit();
+      fitAddon.observeResize(); // Auto-fit when container resizes
 
       // Status elements
       const statusDot = document.getElementById('status-dot');
@@ -249,13 +255,17 @@ const HTML_TEMPLATE = `<!doctype html>
         }
       });
 
-      // Handle resize
-      window.addEventListener('resize', () => {
-        fitAddon.fit();
+      // Handle resize - notify PTY when terminal dimensions change
+      term.onResize(({ cols, rows }) => {
         if (ws && ws.readyState === WebSocket.OPEN) {
-          ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
+          ws.send(JSON.stringify({ type: 'resize', cols, rows }));
         }
       });
+
+      // Also handle window resize (for browsers that don't trigger ResizeObserver on window resize)
+      window.addEventListener('resize', () => {
+        fitAddon.fit();
+      });
     </script>
   </body>
 </html>`;
diff --git a/demo/bun.lock b/demo/bun.lock
diff --git a/demo/index.html b/demo/index.html
@@ -138,7 +138,7 @@
       let ws;
       let fitAddon;
 
-      function initTerminal() {
+      async function initTerminal() {
         term = new Terminal({
           cursorBlink: true,
           fontSize: 14,
@@ -153,10 +153,11 @@
         fitAddon = new FitAddon();
         term.loadAddon(fitAddon);
 
-        term.open(document.getElementById('terminal-container'));
+        await term.open(document.getElementById('terminal-container'));
         fitAddon.fit();
+        fitAddon.observeResize(); // Auto-fit when container resizes
 
-        // Handle window resize
+        // Handle window resize (for browsers that don't trigger ResizeObserver on window resize)
         window.addEventListener('resize', () => {
           fitAddon.fit();
         });
diff --git a/lib/terminal.ts b/lib/terminal.ts
@@ -67,7 +67,7 @@ export class Terminal implements ITerminalCore {
   // Components (created on open())
   private ghostty?: Ghostty;
   public wasmTerm?: GhosttyTerminal; // Made public for link providers
-  private renderer?: CanvasRenderer;
+  public renderer?: CanvasRenderer; // Made public for FitAddon
   private inputHandler?: InputHandler;
   private selectionManager?: SelectionManager;
   private canvas?: HTMLCanvasElement;
