From b00defc9c4e95ffea1c8d379f3a699b4ff4273fe Mon Sep 17 00:00:00 2001
From: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>
Date: Thu, 2 Feb 2023 23:33:54 +0900
Subject: [PATCH] fix(client): move console in multi-file editor (#49228)

* fix: move the console in the multifile editor to below the preview

* fix: go back to single displayConsole, move project based / multifile
logic into the jsx

* revert: previewPane flex value

* feat: refactor to allow console to open up the preview panel and take up all the vertical space

* fix: simplify editor layout logic
---
 .../Challenges/classic/desktop-layout.tsx     | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/client/src/templates/Challenges/classic/desktop-layout.tsx b/client/src/templates/Challenges/classic/desktop-layout.tsx
index 358b09a032d..3909edd0854 100644
--- a/client/src/templates/Challenges/classic/desktop-layout.tsx
+++ b/client/src/templates/Challenges/classic/desktop-layout.tsx
@@ -102,8 +102,13 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
   const displayPreviewPane = hasPreview && showPreviewPane;
   const displayPreviewPortal = hasPreview && showPreviewPortal;
   const displayNotes = projectBasedChallenge ? showNotes && hasNotes : false;
-  const displayConsole =
-    projectBasedChallenge || isMultifileCertProject ? showConsole : true;
+  const displayEditorConsole = !(
+    projectBasedChallenge || isMultifileCertProject
+  )
+    ? true
+    : false;
+  const displayPreviewConsole =
+    (projectBasedChallenge || isMultifileCertProject) && showConsole;
   const {
     codePane,
     editorPane,
@@ -150,10 +155,10 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
               >
                 {editor}
               </ReflexElement>
-              {displayConsole && (
+              {displayEditorConsole && (
                 <ReflexSplitter propagate={true} {...resizeProps} />
               )}
-              {displayConsole && (
+              {displayEditorConsole && (
                 <ReflexElement
                   flex={testsPane.flex}
                   {...reflexProps}
@@ -172,12 +177,22 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
           </ReflexElement>
         )}
 
-        {displayPreviewPane && (
+        {(displayPreviewPane || displayPreviewConsole) && (
           <ReflexSplitter propagate={true} {...resizeProps} />
         )}
-        {displayPreviewPane && (
+        {(displayPreviewPane || displayPreviewConsole) && (
           <ReflexElement flex={previewPane.flex} {...resizeProps}>
-            {preview}
+            <ReflexContainer orientation='horizontal'>
+              {displayPreviewPane && <ReflexElement>{preview}</ReflexElement>}
+              {displayPreviewPane && displayPreviewConsole && (
+                <ReflexSplitter propagate={true} {...resizeProps} />
+              )}
+              {displayPreviewConsole && (
+                <ReflexElement flex={testsPane.flex} {...resizeProps}>
+                  {testOutput}
+                </ReflexElement>
+              )}
+            </ReflexContainer>
           </ReflexElement>
         )}
       </ReflexContainer>