From 795316b1d441501980201c7069079dcb44b3a67d Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Mon, 3 Jan 2022 12:57:58 +0100
Subject: [PATCH] fix(client): always render bottom jaw in correct position
 (#44657)

---
 .../templates/Challenges/classic/editor.tsx   | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx
index c819342279..293a6ada84 100644
--- a/client/src/templates/Challenges/classic/editor.tsx
+++ b/client/src/templates/Challenges/classic/editor.tsx
@@ -722,9 +722,9 @@ const Editor = (props: EditorProps): JSX.Element => {
   }
 
   function initializeRegions(editableRegion: number[]) {
-    const { model } = dataRef.current;
+    const { model, editor } = dataRef.current;
     const monaco = monacoRef.current;
-    if (!model || !monaco) return;
+    if (!model || !monaco || !editor) return;
 
     const editableRange = positionsToRange(monaco, model, [
       editableRegion[0] + 1,
@@ -735,6 +735,14 @@ const Editor = (props: EditorProps): JSX.Element => {
       monaco,
       model
     })[0];
+
+    // This isn't strictly necessary, but it makes sure the description zone and
+    // widget are always rendered in the correct place. The reason it's not
+    // strictly necessary is that, somehow, the first (incorrect) position was
+    // never rendered.
+    dataRef.current.descriptionZoneTop = editor.getTopForLineNumber(
+      getLineBeforeEditableRegion() + 1
+    );
   }
 
   function addWidgetsToRegions(editor: editor.IStandaloneCodeEditor) {
@@ -770,8 +778,18 @@ const Editor = (props: EditorProps): JSX.Element => {
         descriptionNode,
         getDescriptionZoneTop
       );
+      // this order (add widget, change zone) is necessary, since the zone
+      // relies on the domnode being in the DOM to calculate its height - that
+      // doesn't happen until the widget is added.
       editor.addOverlayWidget(dataRef.current.descriptionWidget);
       editor.changeViewZones(descriptionZoneCallback);
+      // Now that the description zone is in place, the browser knows its height
+      // and we can use that to calculate the top of the output zone.  If we do
+      // not do this the output zone will be on top of the description zone,
+      // initially.
+      dataRef.current.outputZoneTop = editor.getTopForLineNumber(
+        getLastLineOfEditableRegion() + 1
+      );
     }
     if (!dataRef.current.outputWidget) {
       dataRef.current.outputWidget = createWidget(