fix: resize xterm with container (#58731)

Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

client/src/templates/Challenges/classic/desktop-layout.tsx

@@ -355,7 +355,9 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
             data-playwright-test-label='preview-pane'
           >
             <ReflexContainer orientation='horizontal'>
-              {displayPreviewPane && <ReflexElement>{preview}</ReflexElement>}
+              {displayPreviewPane && (
+                <ReflexElement {...reflexProps}>{preview}</ReflexElement>
+              )}
               {displayPreviewPane && displayPreviewConsole && (
                 <ReflexSplitter propagate={true} {...resizeProps} />
               )}

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<PreviewProps, 'disableIframe' | 'previewMounted'> & {
   challengeType: number;
   xtermFitRef: React.MutableRefObject<FitAddon | null>;
+  dimensions?: { width: number; height: number };
 }) => {
   return challengeType === challengeTypes.python ||
     challengeType === challengeTypes.multifilePythonCertProject ? (
-    <XtermTerminal xtermFitRef={xtermFitRef} />
+    <XtermTerminal dimensions={dimensions} xtermFitRef={xtermFitRef} />
   ) : (
     <Preview disableIframe={disableIframe} previewMounted={previewMounted} />
   );

client/src/templates/Challenges/classic/xterm.tsx

@@ -16,9 +16,11 @@ const registerServiceWorker = async () => {
 };
 
 export const XtermTerminal = ({
-  xtermFitRef
+  xtermFitRef,
+  dimensions
 }: {
   xtermFitRef: MutableRefObject<FitAddon | null>;
+  dimensions?: { height: number; width: number };
 }) => {
   const termContainerRef = useRef<HTMLDivElement | null>(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 (
-    <div ref={termContainerRef}>
+    <div style={{ height: dimensions?.height }} ref={termContainerRef}>
       <link rel='stylesheet' href='/js/xterm.css' />
     </div>
   );