fix: use requestAnimationFrame before fit() on window resize
When window resize fires, CSS layout hasn't settled yet. Adding requestAnimationFrame ensures the browser has calculated new sizes before xterm.js fit() reads the container dimensions. Reduced debounce from 250ms to 100ms since rAF handles the layout timing.
This commit is contained in:
@@ -254,13 +254,15 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
||||
ws.send(data);
|
||||
});
|
||||
|
||||
// Handle window resize with debounce
|
||||
// Handle window resize with debounce - use rAF to ensure layout settled
|
||||
let resizeTimeout: ReturnType<typeof setTimeout>;
|
||||
const handleResize = () => {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(() => {
|
||||
fitTerminal();
|
||||
}, 250);
|
||||
requestAnimationFrame(() => {
|
||||
fitTerminal();
|
||||
});
|
||||
}, 100);
|
||||
};
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
Reference in New Issue
Block a user