Fix initial terminal resize

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "textual-webterm"
-version = "0.3.20"
+version = "0.3.21"
 description = "Serve terminal sessions over the web"
 authors = ["Will McGugan <will@textualize.io>"]
 license = "MIT"

src/textual_webterm/static/js/terminal.ts

@@ -117,6 +117,8 @@ class WebTerminal {
       this.send(["resize", { width: cols, height: rows }]);
     });
 
+    this.ensureInitialFit();
+
     // Fit to container and handle resize changes
     this.scheduleFit();
     window.addEventListener("resize", () => this.scheduleFit());
@@ -129,6 +131,21 @@ class WebTerminal {
     this.connect();
   }
 
+  private ensureInitialFit(): void {
+    if (!("fonts" in document)) {
+      return;
+    }
+    const fontSet = document.fonts;
+    if (fontSet.status === "loaded") {
+      return;
+    }
+    fontSet.ready
+      .then(() => this.scheduleFit())
+      .catch(() => {
+        // Ignore font readiness errors; resize observer will handle future resizes.
+      });
+  }
+
   /** Fit terminal to container size */
   fit(): void {
     try {
@@ -162,12 +179,27 @@ class WebTerminal {
       this.element.classList.add("-connected");
       this.element.classList.remove("-disconnected");
 
-      // Send initial size
+      // Send initial size.
+      // Important: avoid sending a bogus early resize before fonts/layout settle,
+      // otherwise the PTY will hard-wrap output at the wrong column count.
       this.fit();
+      const sendResize = () => {
         const dims = this.fitAddon.proposeDimensions();
         if (dims) {
           this.send(["resize", { width: dims.cols, height: dims.rows }]);
         }
+      };
+
+      if ("fonts" in document) {
+        document.fonts.ready
+          .then(() => {
+            this.scheduleFit();
+            sendResize();
+          })
+          .catch(() => sendResize());
+      } else {
+        sendResize();
+      }
 
       // Focus terminal
       this.terminal.focus();