From 3b4afe0e5974b4fa3b407e509f224e0c88ce9801 Mon Sep 17 00:00:00 2001
From: Sem Bauke <46919888+Sembauke@users.noreply.github.com>
Date: Wed, 23 Jun 2021 19:15:36 +0200
Subject: [PATCH] fix: unneeded scrollbar multi file editor (#42411)

* fix: multi editor unneeded scrollbar
---
 .../Challenges/classic/DesktopLayout.js       | 120 ++++++++++--------
 1 file changed, 65 insertions(+), 55 deletions(-)

diff --git a/client/src/templates/Challenges/classic/DesktopLayout.js b/client/src/templates/Challenges/classic/DesktopLayout.js
index fbab59d40d..67939aff3e 100644
--- a/client/src/templates/Challenges/classic/DesktopLayout.js
+++ b/client/src/templates/Challenges/classic/DesktopLayout.js
@@ -84,69 +84,79 @@ class DesktopLayout extends Component {
 
     return (
       <Fragment>
-        {projectBasedChallenge && (
-          <ActionRow switchDisplayTab={this.switchDisplayTab} {...this.state} />
-        )}
-        <ReflexContainer className='desktop-layout' orientation='vertical'>
-          {!projectBasedChallenge && (
-            <ReflexElement
-              flex={instructionPane.flex}
-              name='instructionPane'
-              {...resizeProps}
-            >
-              {instructions}
-            </ReflexElement>
+        <ReflexContainer className='desktop-layout' orientation='horizontal'>
+          {projectBasedChallenge && (
+            <ActionRow
+              switchDisplayTab={this.switchDisplayTab}
+              {...this.state}
+            />
           )}
-          {!projectBasedChallenge && (
-            <ReflexSplitter propagate={true} {...resizeProps} />
-          )}
-
-          <ReflexElement
-            flex={editorPane.flex}
-            name='editorPane'
-            {...resizeProps}
-          >
-            {challengeFile && showUpcomingChanges && !hasEditableBoundries && (
-              <EditorTabs />
-            )}
-            {challengeFile && (
-              <ReflexContainer key={challengeFile.key} orientation='horizontal'>
+          <ReflexElement flex={8} {...reflexProps} {...resizeProps}>
+            <ReflexContainer orientation='vertical'>
+              {!projectBasedChallenge && (
                 <ReflexElement
-                  flex={codePane.flex}
-                  name='codePane'
-                  {...reflexProps}
+                  flex={instructionPane.flex}
+                  name='instructionPane'
                   {...resizeProps}
                 >
-                  {<Fragment>{editor}</Fragment>}
+                  {instructions}
                 </ReflexElement>
-                {isConsoleDisplayable && (
-                  <ReflexSplitter propagate={true} {...resizeProps} />
-                )}
-                {isConsoleDisplayable && (
-                  <ReflexElement
-                    flex={testsPane.flex}
-                    name='testsPane'
-                    {...reflexProps}
-                    {...resizeProps}
+              )}
+              {!projectBasedChallenge && (
+                <ReflexSplitter propagate={true} {...resizeProps} />
+              )}
+
+              <ReflexElement
+                flex={editorPane.flex}
+                name='editorPane'
+                {...resizeProps}
+              >
+                {challengeFile &&
+                  showUpcomingChanges &&
+                  !hasEditableBoundries && <EditorTabs />}
+                {challengeFile && (
+                  <ReflexContainer
+                    key={challengeFile.key}
+                    orientation='horizontal'
                   >
-                    {testOutput}
-                  </ReflexElement>
+                    <ReflexElement
+                      flex={codePane.flex}
+                      name='codePane'
+                      {...reflexProps}
+                      {...resizeProps}
+                    >
+                      <Fragment>{editor}</Fragment>
+                    </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>
+              )}
+            </ReflexContainer>
           </ReflexElement>
-          {isPreviewDisplayable && (
-            <ReflexSplitter propagate={true} {...resizeProps} />
-          )}
-          {isPreviewDisplayable && (
-            <ReflexElement
-              flex={previewPane.flex}
-              name='previewPane'
-              {...resizeProps}
-            >
-              {preview}
-            </ReflexElement>
-          )}
         </ReflexContainer>
       </Fragment>
     );