Tweaking height proportion of visual and text output to suit the average project better

Author: loiswells97

src/components/Editor/Runners/PythonRunner/PythonRunner.js

@@ -295,7 +295,7 @@ const PythonRunner = () => {
     <div className={`pythonrunner-container`}>
       { isEmbedded ?
         <>
-          <div className='output-panel' style={!hasVisualOutput ? {display: 'none'} : {}}>
+          <div className='output-panel output-panel--visual' style={!hasVisualOutput ? {display: 'none'} : {}}>
             <Tabs forceRenderTabPanel={true}>
               <TabList>
                 <Tab key={0}>Visual Output</Tab>
@@ -305,7 +305,7 @@ const PythonRunner = () => {
               </TabPanel>
             </Tabs>
           </div>
-          <div className='output-panel'>
+          <div className='output-panel output-panel--text'>
             <Tabs forceRenderTabPanel={true}>
               <TabList>
                 <Tab key={0}>Text Output</Tab>

src/components/Editor/Runners/PythonRunner/PythonRunner.scss

@@ -55,7 +55,13 @@
 }
 
 .output-panel {
-  flex: 1;
   display: flex;
   overflow: hidden;
+  &--text {
+    flex: 3;
+  }
+
+  &--visual {
+    flex: 7;
+  }
 }