Merge pull request #2640 from PiyushChandra17/piyush/fix-mweb-console-resize

Fix mweb console

Author: lindapaiste

client/modules/IDE/components/FloatingActionButton.jsx

@@ -38,17 +38,20 @@ const Button = styled.button`
   }
 `;
 
-const FloatingActionButton = (props) => {
+const FloatingActionButton = ({ syncFileContent, offsetBottom }) => {
   const isPlaying = useSelector((state) => state.ide.isPlaying);
   const dispatch = useDispatch();
 
   return (
     <Button
       className={classNames({ stop: isPlaying })}
-      style={{ paddingLeft: isPlaying ? 0 : remSize(5) }}
+      style={{
+        paddingLeft: isPlaying ? 0 : remSize(5),
+        marginBottom: offsetBottom
+      }}
       onClick={() => {
         if (!isPlaying) {
-          props.syncFileContent();
+          syncFileContent();
           dispatch(startSketch());
         } else dispatch(stopSketch());
       }}
@@ -59,7 +62,8 @@ const FloatingActionButton = (props) => {
 };
 
 FloatingActionButton.propTypes = {
-  syncFileContent: PropTypes.func.isRequired
+  syncFileContent: PropTypes.func.isRequired,
+  offsetBottom: PropTypes.number.isRequired
 };
 
 export default FloatingActionButton;

client/modules/IDE/pages/IDEView.jsx

@@ -127,6 +127,11 @@ const IDEView = () => {
     };
   }, [shouldAutosave, dispatch]);
 
+  const consoleCollapsedSize = 29;
+  const currentConsoleSize = ide.consoleIsExpanded
+    ? consoleSize
+    : consoleCollapsedSize;
+
   return (
     <RootPage>
       <Helmet>
@@ -171,8 +176,8 @@ const IDEView = () => {
                   <SplitPane
                     split="horizontal"
                     primary="second"
-                    size={ide.consoleIsExpanded ? consoleSize : 29}
-                    minSize={29}
+                    size={currentConsoleSize}
+                    minSize={consoleCollapsedSize}
                     onChange={(size) => {
                       setConsoleSize(size);
                     }}
@@ -204,19 +209,26 @@ const IDEView = () => {
             </main>
           ) : (
             <>
-              <FloatingActionButton syncFileContent={syncFileContent} />
+              <FloatingActionButton
+                syncFileContent={syncFileContent}
+                offsetBottom={ide.isPlaying ? currentConsoleSize : 0}
+              />
               <PreviewWrapper show={ide.isPlaying}>
                 <SplitPane
                   style={{ position: 'static' }}
                   split="horizontal"
                   primary="second"
-                  minSize={200}
-                  onChange={() => {
+                  size={currentConsoleSize}
+                  minSize={consoleCollapsedSize}
+                  onChange={(size) => {
+                    setConsoleSize(size);
                     setIsOverlayVisible(true);
                   }}
                   onDragFinished={() => {
                     setIsOverlayVisible(false);
                   }}
+                  allowResize={ide.consoleIsExpanded}
+                  className="editor-preview-subpanel"
                 >
                   <PreviewFrame
                     fullView