fix: use ResizeObserver for more reliable terminal resize detection

Window resize events fire before CSS layout settles, so FitAddon
was reading stale container dimensions. ResizeObserver fires after
the element actually changes size, ensuring fit() gets correct
dimensions. Reduced debounce from 250ms to 100ms for snappier response.
This commit is contained in:
Fusion
2026-05-24 16:50:34 +02:00
parent f4211ad452
commit 6e600fdbcd
+6 -7
View File
@@ -254,16 +254,15 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
ws.send(data);
});
// Handle window resize with debounce
// Handle container resize with ResizeObserver (more reliable than window resize)
let resizeTimeout: ReturnType<typeof setTimeout>;
const handleResize = () => {
const resizeObserver = new ResizeObserver(() => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
fitTerminal();
}, 250);
};
window.addEventListener("resize", handleResize);
}, 100);
});
resizeObserver.observe(container);
// Refit after mobile header auto-hides (3s delay + 0.3s transition)
const headerHideTimeout = setTimeout(() => {
@@ -298,7 +297,7 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
return () => {
clearTimeout(resizeTimeout);
clearTimeout(headerHideTimeout);
window.removeEventListener("resize", handleResize);
resizeObserver.disconnect();
document.removeEventListener("visibilitychange", handleVisibilityChange);
if (ws) {
ws.close();