From 0f32cabef93c80cdb431b2acf0c77d42426ef005 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Mon, 27 Sep 2021 12:16:29 +0200
Subject: [PATCH] fix: move ActionRow outside the ReflexContainer (#43532)

* fix: move ActionRow outside the ReflexContainer

It does not need to be resizable.

* fix: make DesktopLayout aware of ActionRow

The ReflexContainer seems to need to be inside a display: flex component
to correctly compute the sizes of it's children.

* refactor: remove unused props
---
 client/src/components/layouts/learn.css       |   2 +
 .../Challenges/classic/DesktopLayout.js       | 118 +++++++++---------
 .../Challenges/classic/MultifileEditor.js     |   4 +-
 3 files changed, 60 insertions(+), 64 deletions(-)

diff --git a/client/src/components/layouts/learn.css b/client/src/components/layouts/learn.css
index 045e35d787..a96b2c77b0 100644
--- a/client/src/components/layouts/learn.css
+++ b/client/src/components/layouts/learn.css
@@ -1,4 +1,6 @@
 #learn-app-wrapper .desktop-layout {
+  display: flex;
+  flex-direction: column;
   height: calc(
     100vh - var(--header-height, 0px) - var(--flash-message-height, 0px)
   );
diff --git a/client/src/templates/Challenges/classic/DesktopLayout.js b/client/src/templates/Challenges/classic/DesktopLayout.js
index 610d8c4653..514989ab06 100644
--- a/client/src/templates/Challenges/classic/DesktopLayout.js
+++ b/client/src/templates/Challenges/classic/DesktopLayout.js
@@ -37,9 +37,7 @@ const propTypes = {
 };
 
 const reflexProps = {
-  propagateDimensions: true,
-  renderOnResize: true,
-  renderOnResizeRate: 20
+  propagateDimensions: true
 };
 
 class DesktopLayout extends Component {
@@ -88,7 +86,7 @@ class DesktopLayout extends Component {
       layoutState;
 
     return (
-      <ReflexContainer className='desktop-layout' orientation='horizontal'>
+      <div className='desktop-layout'>
         {projectBasedChallenge && (
           <ActionRow
             block={block}
@@ -97,73 +95,71 @@ class DesktopLayout extends Component {
             superBlock={superBlock}
           />
         )}
-        <ReflexElement flex={8} {...reflexProps} {...resizeProps}>
-          <ReflexContainer orientation='vertical'>
-            {!projectBasedChallenge && (
-              <ReflexElement
-                flex={instructionPane.flex}
-                name='instructionPane'
-                {...resizeProps}
-              >
-                {instructions}
-              </ReflexElement>
-            )}
-            {!projectBasedChallenge && (
-              <ReflexSplitter propagate={true} {...resizeProps} />
-            )}
-
+        <ReflexContainer orientation='vertical'>
+          {!projectBasedChallenge && (
             <ReflexElement
-              flex={editorPane.flex}
-              name='editorPane'
+              flex={instructionPane.flex}
+              name='instructionPane'
               {...resizeProps}
             >
-              {challengeFile &&
-                showUpcomingChanges &&
-                !hasEditableBoundries && <EditorTabs />}
-              {challengeFile && (
-                <ReflexContainer
-                  key={challengeFile.fileKey}
-                  orientation='horizontal'
+              {instructions}
+            </ReflexElement>
+          )}
+          {!projectBasedChallenge && (
+            <ReflexSplitter propagate={true} {...resizeProps} />
+          )}
+
+          <ReflexElement
+            flex={editorPane.flex}
+            name='editorPane'
+            {...resizeProps}
+          >
+            {challengeFile && showUpcomingChanges && !hasEditableBoundries && (
+              <EditorTabs />
+            )}
+            {challengeFile && (
+              <ReflexContainer
+                key={challengeFile.fileKey}
+                orientation='horizontal'
+              >
+                <ReflexElement
+                  flex={codePane.flex}
+                  name='codePane'
+                  {...reflexProps}
+                  {...resizeProps}
                 >
+                  {editor}
+                </ReflexElement>
+                {isConsoleDisplayable && (
+                  <ReflexSplitter propagate={true} {...resizeProps} />
+                )}
+                {isConsoleDisplayable && (
                   <ReflexElement
-                    flex={codePane.flex}
-                    name='codePane'
+                    flex={testsPane.flex}
+                    name='testsPane'
                     {...reflexProps}
                     {...resizeProps}
                   >
-                    {editor}
+                    {testOutput}
                   </ReflexElement>
-                  {isConsoleDisplayable && (
-                    <ReflexSplitter propagate={true} {...resizeProps} />
-                  )}
-                  {isConsoleDisplayable && (
-                    <ReflexElement
-                      flex={testsPane.flex}
-                      name='testsPane'
-                      {...reflexProps}
-                      {...resizeProps}
-                    >
-                      {testOutput}
-                    </ReflexElement>
-                  )}
-                </ReflexContainer>
-              )}
+                )}
+              </ReflexContainer>
+            )}
+          </ReflexElement>
+          {isPreviewDisplayable && (
+            <ReflexSplitter propagate={true} {...resizeProps} />
+          )}
+          {isPreviewDisplayable && (
+            <ReflexElement
+              flex={previewPane.flex}
+              name='previewPane'
+              {...resizeProps}
+            >
+              {preview}
             </ReflexElement>
-            {isPreviewDisplayable && (
-              <ReflexSplitter propagate={true} {...resizeProps} />
-            )}
-            {isPreviewDisplayable && (
-              <ReflexElement
-                flex={previewPane.flex}
-                name='previewPane'
-                {...resizeProps}
-              >
-                {preview}
-              </ReflexElement>
-            )}
-          </ReflexContainer>
-        </ReflexElement>
-      </ReflexContainer>
+          )}
+        </ReflexContainer>
+      </div>
     );
   }
 }
diff --git a/client/src/templates/Challenges/classic/MultifileEditor.js b/client/src/templates/Challenges/classic/MultifileEditor.js
index d569e461da..b1390e80ea 100644
--- a/client/src/templates/Challenges/classic/MultifileEditor.js
+++ b/client/src/templates/Challenges/classic/MultifileEditor.js
@@ -98,9 +98,7 @@ class MultifileEditor extends Component {
     // editors.map(props => <EditorWrapper ...props>).join(<ReflexSplitter>)
     // ...probably! As long as we can put keys in the right places.
     const reflexProps = {
-      propagateDimensions: true,
-      renderOnResize: true,
-      renderOnResizeRate: 20
+      propagateDimensions: true
     };
 
     let splitterJSXRight, splitterHTMLRight, splitterCSSRight;