Resizing Terminal is buggy because of the iframe #441

Activity

1. AriPerkkio

   added

   bugSomething isn't workingSomething isn't working

   good first issueGood for newcomersGood for newcomers

   help wantedExtra attention is neededExtra attention is needed

   pr-welcomeAccepting pull requests for this changeAccepting pull requests for this change

   and removed

   help wantedExtra attention is neededExtra attention is needed

   on Mar 20, 2025
2. AlokPy1484 commented on Sep 30, 2025

   

   AlokPy1484

   on Sep 30, 2025

   More actions

   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 .) It would be really helpful if someone could give we a direction on where should I find it and if my approach is correct.