fix: add window resize fallback and delay refresh to next frame

- Add window resize listener as fallback for ResizeObserver
- Use 250ms debounce to avoid early layout reads
- Delay term.refresh() to next animation frame so renderer
  can process resize before we force redraw
- Clean up window resize listener on unmount
This commit is contained in:
Fusion
2026-05-24 19:31:15 +02:00
parent 4d0c70de98
commit 738e01bb7c
+19 -1
View File
@@ -229,7 +229,10 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
fitAddonRef.current.fit();
const { cols, rows } = termRef.current;
if (cols !== oldCols || rows !== oldRows) {
termRef.current.refresh(0, rows - 1);
// Delay refresh to next frame so renderer can process resize first
requestAnimationFrame(() => {
termRef.current?.refresh(0, rows - 1);
});
}
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: "resize", cols, rows }));
@@ -290,6 +293,19 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
});
resizeObserver.observe(container);
// Also listen for window resize as fallback (ResizeObserver might miss some cases)
let windowResizeTimeout: ReturnType<typeof setTimeout>;
const handleWindowResize = () => {
clearTimeout(windowResizeTimeout);
windowResizeTimeout = setTimeout(() => {
requestAnimationFrame(() => {
if (!container.isConnected) return;
fitTerminal();
});
}, 250);
};
window.addEventListener("resize", handleWindowResize);
// Refit after mobile header auto-hides (3s delay + 0.3s transition)
const headerHideTimeout = setTimeout(() => {
fitTerminal();
@@ -322,8 +338,10 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
return () => {
clearTimeout(resizeTimeout);
clearTimeout(windowResizeTimeout);
clearTimeout(headerHideTimeout);
resizeObserver.disconnect();
window.removeEventListener("resize", handleWindowResize);
document.removeEventListener("visibilitychange", handleVisibilityChange);
if (ws) {
ws.close();