From 0d1d9ee47995e72b19e8f0aa2f16aa992e1df00f Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Tue, 18 Feb 2025 07:54:48 +0100
Subject: [PATCH] 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>
---
 .../Challenges/classic/desktop-layout.tsx          |  4 +++-
 client/src/templates/Challenges/classic/show.tsx   |  4 +++-
 client/src/templates/Challenges/classic/xterm.tsx  | 14 ++++++++++++--
 3 files changed, 18 insertions(+), 4 deletions(-)

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'
           >
             <ReflexContainer orientation='horizontal'>
-              {displayPreviewPane && <ReflexElement>{preview}</ReflexElement>}
+              {displayPreviewPane && (
+                <ReflexElement {...reflexProps}>{preview}</ReflexElement>
+              )}
               {displayPreviewPane && displayPreviewConsole && (
                 <ReflexSplitter propagate={true} {...resizeProps} />
               )}
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<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} />
   );
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<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>
   );