diff --git a/client/src/templates/Challenges/classic/desktop-layout.tsx b/client/src/templates/Challenges/classic/desktop-layout.tsx index c76212c583f..306ee4be4f7 100644 --- a/client/src/templates/Challenges/classic/desktop-layout.tsx +++ b/client/src/templates/Challenges/classic/desktop-layout.tsx @@ -355,7 +355,9 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => { data-playwright-test-label='preview-pane' > - {displayPreviewPane && {preview}} + {displayPreviewPane && ( + {preview} + )} {displayPreviewPane && displayPreviewConsole && ( )} diff --git a/client/src/templates/Challenges/classic/show.tsx b/client/src/templates/Challenges/classic/show.tsx index 73eef8f2ac2..5c71f40b7aa 100644 --- a/client/src/templates/Challenges/classic/show.tsx +++ b/client/src/templates/Challenges/classic/show.tsx @@ -158,6 +158,7 @@ const handleContentWidgetEvents = (e: MouseEvent | TouchEvent): void => { }; const StepPreview = ({ + dimensions, disableIframe, previewMounted, challengeType, @@ -165,10 +166,11 @@ const StepPreview = ({ }: Pick & { challengeType: number; xtermFitRef: React.MutableRefObject; + dimensions?: { width: number; height: number }; }) => { return challengeType === challengeTypes.python || challengeType === challengeTypes.multifilePythonCertProject ? ( - + ) : ( ); diff --git a/client/src/templates/Challenges/classic/xterm.tsx b/client/src/templates/Challenges/classic/xterm.tsx index 88b8f2d3f28..da988c72a65 100644 --- a/client/src/templates/Challenges/classic/xterm.tsx +++ b/client/src/templates/Challenges/classic/xterm.tsx @@ -16,9 +16,11 @@ const registerServiceWorker = async () => { }; export const XtermTerminal = ({ - xtermFitRef + xtermFitRef, + dimensions }: { xtermFitRef: MutableRefObject; + dimensions?: { height: number; width: number }; }) => { const termContainerRef = useRef(null); @@ -103,8 +105,16 @@ export const XtermTerminal = ({ }; }, [xtermFitRef]); + useEffect(() => { + if (xtermFitRef.current) xtermFitRef.current.fit(); + + // dimensions is an implicit dependency, since it's not directly used by the + // effect, but fitAddon.fit() needs to be called whenever the container size + // changes. + }, [xtermFitRef, dimensions]); + return ( -
+
);