fix: wait for fonts and retry fit until proper dimensions

- Wait for document.fonts.ready before fitting (ensures correct cell metrics)
- Retry fit every 100ms if rows <= 1 or cols <= 10 (layout still settling)
- Up to 30 retries (3 seconds) for layout to stabilize
- Remove redundant delayed fits, keep only header auto-hide fit at 4s

apps/web/src/components/terminal.tsx

@@ -212,9 +212,8 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
       // Connect WebSocket
       ws = connectWebSocket();
 
-      // Fit after layout settles
+      // Robust fitting: wait for fonts and stable dimensions
-      requestAnimationFrame(() => {
+      const performFit = () => {
-        requestAnimationFrame(() => {
         fitAddon.fit();
         const { cols, rows } = term;
         if (ws.readyState === WebSocket.OPEN) {
@@ -226,38 +225,30 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
             })
           );
         }
+        return { cols, rows };
+      };
 
-          // Force a second fit after layout fully settles
+      const ensureProperFit = (attempt = 0) => {
-          setTimeout(() => {
+        const { cols, rows } = performFit();
-            fitAddon.fit();
+        // If dimensions are unreasonably small, retry (layout still settling)
-            const { cols, rows } = term;
+        if ((rows <= 1 || cols <= 10) && attempt < 30) {
-            if (ws.readyState === WebSocket.OPEN) {
+          setTimeout(() => ensureProperFit(attempt + 1), 100);
-              ws.send(
-                JSON.stringify({
-                  type: "resize",
-                  cols,
-                  rows,
-                })
-              );
         }
-          }, 500);
+      };
+
+      // Wait for fonts to load, then fit with retry logic
+      document.fonts.ready.then(() => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            ensureProperFit();
+          });
+        });
+      });
 
       // Fit after mobile header auto-hides (3s delay + 0.3s transition)
       setTimeout(() => {
-            fitAddon.fit();
+        performFit();
-            const { cols, rows } = term;
-            if (ws.readyState === WebSocket.OPEN) {
-              ws.send(
-                JSON.stringify({
-                  type: "resize",
-                  cols,
-                  rows,
-                })
-              );
-            }
       }, 4000);
-        });
-      });
     };
 
     // Check if container already has dimensions