fix: add window resize listener and refresh on font size change

- Add window resize listener to complement ResizeObserver
- Clear window resize timeout on cleanup
- Force term.refresh() after font size changes
- Send resize message after font size change
This commit is contained in:
Fusion
2026-05-24 18:18:41 +02:00
parent ca22e9c9d2
commit 4a356fe88e
+14
View File
@@ -284,6 +284,16 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
});
resizeObserver.observe(container);
// Also handle window resize (ResizeObserver might miss viewport-only changes)
let windowResizeTimeout: ReturnType<typeof setTimeout>;
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<TerminalProps> = ({
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<TerminalProps> = ({
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({