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,
+  propagateDimensions: true
-  renderOnResize: true,
-  renderOnResizeRate: 20
 };
 
 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,7 +95,6 @@ class DesktopLayout extends Component {
             superBlock={superBlock}
           />
         )}
-        <ReflexElement flex={8} {...reflexProps} {...resizeProps}>
         <ReflexContainer orientation='vertical'>
           {!projectBasedChallenge && (
             <ReflexElement
@@ -117,9 +114,9 @@ class DesktopLayout extends Component {
             name='editorPane'
             {...resizeProps}
           >
-              {challengeFile &&
+            {challengeFile && showUpcomingChanges && !hasEditableBoundries && (
-                showUpcomingChanges &&
+              <EditorTabs />
-                !hasEditableBoundries && <EditorTabs />}
+            )}
             {challengeFile && (
               <ReflexContainer
                 key={challengeFile.fileKey}
@@ -162,8 +159,7 @@ class DesktopLayout extends Component {
             </ReflexElement>
           )}
         </ReflexContainer>
-        </ReflexElement>
+      </div>
-      </ReflexContainer>
     );
   }
 }

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,
+      propagateDimensions: true
-      renderOnResize: true,
-      renderOnResizeRate: 20
     };
 
     let splitterJSXRight, splitterHTMLRight, splitterCSSRight;