From 672184d0c30c2b941a8cce69128373f9878839a9 Mon Sep 17 00:00:00 2001
From: Valeriy S <ValeraS@users.noreply.github.com>
Date: Tue, 14 May 2019 17:37:13 +0300
Subject: [PATCH] fix(client): learn layout on mobile

---
 .../src/templates/Challenges/classic/Show.js  | 51 +++++++++----------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/client/src/templates/Challenges/classic/Show.js b/client/src/templates/Challenges/classic/Show.js
index a86dc283a0..c307986e70 100644
--- a/client/src/templates/Challenges/classic/Show.js
+++ b/client/src/templates/Challenges/classic/Show.js
@@ -250,33 +250,30 @@ class ShowClassic extends Component {
           title={`Learn ${this.getBlockNameTitle()} | freeCodeCamp.org`}
         />
         <Media maxWidth={MAX_MOBILE_WIDTH}>
-          {matches =>
-            matches ? (
-              <MobileLayout
-                editor={this.renderEditor()}
-                guideUrl={this.getGuideUrl()}
-                hasPreview={this.hasPreview()}
-                instructions={this.renderInstructionsPanel({
-                  showToolPanel: false
-                })}
-                preview={this.renderPreview()}
-                testOutput={this.renderTestOutput()}
-                videoUrl={this.getVideoUrl()}
-              />
-            ) : (
-              <DesktopLayout
-                challengeFile={this.getChallengeFile()}
-                editor={this.renderEditor()}
-                hasPreview={this.hasPreview()}
-                instructions={this.renderInstructionsPanel({
-                  showToolPanel: true
-                })}
-                preview={this.renderPreview()}
-                resizeProps={this.resizeProps}
-                testOutput={this.renderTestOutput()}
-              />
-            )
-          }
+          <MobileLayout
+            editor={this.renderEditor()}
+            guideUrl={this.getGuideUrl()}
+            hasPreview={this.hasPreview()}
+            instructions={this.renderInstructionsPanel({
+              showToolPanel: false
+            })}
+            preview={this.renderPreview()}
+            testOutput={this.renderTestOutput()}
+            videoUrl={this.getVideoUrl()}
+          />
+        </Media>
+        <Media minWidth={MAX_MOBILE_WIDTH + 1}>
+          <DesktopLayout
+            challengeFile={this.getChallengeFile()}
+            editor={this.renderEditor()}
+            hasPreview={this.hasPreview()}
+            instructions={this.renderInstructionsPanel({
+              showToolPanel: true
+            })}
+            preview={this.renderPreview()}
+            resizeProps={this.resizeProps}
+            testOutput={this.renderTestOutput()}
+          />
         </Media>
         <CompletionModal />
         <HelpModal />