diff --git a/apps/web/src/components/terminal.tsx b/apps/web/src/components/terminal.tsx index 68434e4..b1203cd 100644 --- a/apps/web/src/components/terminal.tsx +++ b/apps/web/src/components/terminal.tsx @@ -284,6 +284,16 @@ export const TerminalComponent: React.FC = ({ }); resizeObserver.observe(container); + // Also handle window resize (ResizeObserver might miss viewport-only changes) + let windowResizeTimeout: ReturnType; + const handleWindowResize = () => { + clearTimeout(windowResizeTimeout); + windowResizeTimeout = setTimeout(() => { + requestAnimationFrame(() => fitTerminal()); + }, 100); + }; + window.addEventListener("resize", handleWindowResize); + // Refit after mobile header auto-hides (3s delay + 0.3s transition) const headerHideTimeout = setTimeout(() => { fitTerminal(); @@ -316,8 +326,10 @@ export const TerminalComponent: React.FC = ({ return () => { clearTimeout(resizeTimeout); + clearTimeout(windowResizeTimeout); clearTimeout(headerHideTimeout); resizeObserver.disconnect(); + window.removeEventListener("resize", handleWindowResize); document.removeEventListener("visibilitychange", handleVisibilityChange); if (ws) { ws.close(); @@ -356,6 +368,8 @@ export const TerminalComponent: React.FC = ({ try { fitAddonRef.current.fit(); const { cols, rows } = termRef.current; + // Force refresh after font size change + termRef.current.refresh(0, rows - 1); if (wsRef.current?.readyState === WebSocket.OPEN) { wsRef.current.send( JSON.stringify({