From 369f150029327be6bd6bf012bc4996244526747a Mon Sep 17 00:00:00 2001
From: Valeriy <ValeraS@users.noreply.github.com>
Date: Sat, 12 Jan 2019 03:47:58 +0300
Subject: [PATCH] fix(learn): some styling issues

---
 client/src/pages/learn.css                    | 19 ++----------
 .../Challenges/classic/DesktopLayout.js       | 30 +++++++++----------
 .../templates/Challenges/classic/classic.css  |  2 +-
 .../Challenges/components/preview.css         |  8 +++--
 4 files changed, 22 insertions(+), 37 deletions(-)

diff --git a/client/src/pages/learn.css b/client/src/pages/learn.css
index c393b71ee5..cc95bbf023 100644
--- a/client/src/pages/learn.css
+++ b/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;
-}
diff --git a/client/src/templates/Challenges/classic/DesktopLayout.js b/client/src/templates/Challenges/classic/DesktopLayout.js
index 51f583e480..0c60156373 100644
--- a/client/src/templates/Challenges/classic/DesktopLayout.js
+++ b/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>
     );
diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css
index 6d38590827..33a096045b 100644
--- a/client/src/templates/Challenges/classic/classic.css
+++ b/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);
   }
diff --git a/client/src/templates/Challenges/components/preview.css b/client/src/templates/Challenges/components/preview.css
index 24498dc399..32d53a31fa 100644
--- a/client/src/templates/Challenges/components/preview.css
+++ b/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);
   }
 }