fix(learn): some styling issues

client/src/pages/learn.css

@@ -7,27 +7,12 @@
   margin: 0 auto;
 }
 
-@media screen, (max-width: 630px) {
+@media screen and (max-width: 630px) {
   .learn-page-wrapper {
-    padding: 0px 25px 0px 25px;
+    padding: 0 25px;
   }
 }
 
 .learn-page-wrapper p {
   margin-bottom: 0.75rem;
 }
-
-#learn-app-wrapper {
-  overflow-x:hidden;
-}
-
-@media screen, (max-width: 767px) {
-  #learn-app-wrapper {
-    right: -2em;
-    padding: 2px 0 0 0;
-  }
-}
-
-.reflex-layout.reflex-container.vertical {
-  margin: 0 18px;
-}

client/src/templates/Challenges/classic/DesktopLayout.js

@@ -1,20 +1,20 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
 import PropTypes from 'prop-types';
 
 const propTypes = {
-  resizeProps: PropTypes.shape({
-    onStopResize: PropTypes.func,
-    onResize: PropTypes.func
-  }),
-  instructions: PropTypes.element,
   challengeFile: PropTypes.shape({
     key: PropTypes.string
   }),
   editor: PropTypes.element,
-  testOutput: PropTypes.element,
   hasPreview: PropTypes.bool,
-  preview: PropTypes.element
+  instructions: PropTypes.element,
+  preview: PropTypes.element,
+  resizeProps: PropTypes.shape({
+    onStopResize: PropTypes.func,
+    onResize: PropTypes.func
+  }),
+  testOutput: PropTypes.element
 };
 
 class DesktopLayout extends Component {
@@ -43,7 +43,7 @@ class DesktopLayout extends Component {
                 renderOnResize={true}
                 renderOnResizeRate={20}
                 {...resizeProps}
-              >
+                >
                 {editor}
               </ReflexElement>
               <ReflexSplitter propagate={true} {...resizeProps} />
@@ -53,19 +53,17 @@ class DesktopLayout extends Component {
                 renderOnResize={true}
                 renderOnResizeRate={20}
                 {...resizeProps}
-              >
+                >
                 {testOutput}
               </ReflexElement>
             </ReflexContainer>
           )}
         </ReflexElement>
+        {hasPreview && <ReflexSplitter propagate={true} {...resizeProps} />}
         {hasPreview && (
-          <Fragment>
-            <ReflexSplitter propagate={true} {...resizeProps} />
-            <ReflexElement flex={0.7} {...resizeProps}>
-              {preview}
-            </ReflexElement>
-          </Fragment>
+          <ReflexElement flex={0.7} {...resizeProps}>
+            {preview}
+          </ReflexElement>
         )}
       </ReflexContainer>
     );

client/src/templates/Challenges/classic/classic.css

@@ -13,7 +13,7 @@
   overflow-y: auto;
 }
 
-@media screen, (max-width: 767px) {
+@media screen and (max-width: 767px) {
   .instructions-panel {
     height: calc(100vh - 112px);
   }

client/src/templates/Challenges/components/preview.css

@@ -1,4 +1,5 @@
-.challenge-preview, .challenge-preview-frame {
+.challenge-preview,
+.challenge-preview-frame {
   height: calc(100vh - 38px);
   width: 100%;
   padding: 0;
@@ -6,8 +7,9 @@
   border: none;
 }
 
-@media screen, (max-width: 767px) {
-  .challenge-preview, .challenge-preview-frame {
+@media screen and (max-width: 767px) {
+  .challenge-preview,
+  .challenge-preview-frame {
     height: calc(100vh - 112px);
   }
 }