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

@@ -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)
   );

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>
     );
   }
 }

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;