Resizing Terminal is buggy because of the iframe

[GaetanRouzies]

Describe the bug

The Terminal is not resizing correctly.

Link to a StackBlitz project which shows the error

https://demo.tutorialkit.dev/

Steps to reproduce

1. Go to TutorialKit Demo
2. Toggle the Terminal
3. Try to resize the Terminal
4. Sometime the resizing doesn't happens or is stuck

Expected behavior

The Terminal should resizing correctly.

Screenshots

Here's a video to show the bug

https://github.com/user-attachments/assets/1e9e2650-b5fd-40bb-8bf4-5fd1c548d2a1

Platform

• TutorialKit version: Demo
• OS: macOS
• Browser: Chromium (Brave)
• Version: 1.76

Additional context

I had this problem while making my own iframe and Terminal with panels I can resize. I fixed it by putting an overlay on the iframe when resizing. I think it’s because the iframe’s resize and mouse events stop the Terminal panel from resizing right.

[AlokPy1484]

Understanding of codebase:

• TutorialKit uses Xterm js to emulate terminal in browser.
• xterm’s fitAddon plugin is used to automatically resize terminal to fill the parent container
• terminal related files are in ./packages/react/src/core/Terminal

Observations:

• terminal is buggy only when we increase its height, reducing height is smooth and if height is maxed then it latches with preview section
• No issue with terminal resize when using site on mobile phone

Solutions tried:

• I tried to add a debounce to “onTerminalResize?.(terminal.cols, terminal.rows)” as it was being triggered every time we change height, I thought it's excessive repeated calls might be overloading fitAddon.fit(). But later found out that onTerminalResize is used to send new terminal dimensions to backend for rendering properties like font alignment, spacing, etc. It does not set terminal size in UI. For that “terminal.loadAddon(fitAddon);” is being used so I added debounce to it but still issue was not solved.

I would like to work on it further, my approach will be to tweak the layout of Output section but for that I first need to find the files that defines it. Currently I am unable to find file where terminal and preview sections layout is defined (i.e. a file that contains something like <Terminal className="h-32" readonly={false} theme={theme} onTerminalReady={setTerminal} />.) It would be really helpful if someone could give we a direction on where should I find it and if my approach is correct.