fix(learn): backend challenge UI

client/src/templates/Challenges/backend/Show.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
 import { createSelector } from 'reselect';
 import { reduxForm } from 'redux-form';
 import { graphql } from 'gatsby';
@@ -80,6 +81,12 @@ const options = {
 };
 
 export class BackEnd extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+    this.updateDimensions = this.updateDimensions.bind(this);
+  }
+
   componentDidMount() {
     const {
       initTests,
@@ -94,6 +101,15 @@ export class BackEnd extends Component {
     } = this.props;
     initTests(tests);
     updateChallengeMeta({ ...challengeMeta, challengeType });
+    window.addEventListener('resize', this.updateDimensions);
+  }
+
+  updateDimensions() {
+    this.setState({ width: window.innerWidth, height: window.innerHeight });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateDimensions);
   }
 
   componentDidUpdate(prevProps) {
@@ -143,6 +159,9 @@ export class BackEnd extends Component {
     const blockNameTitle = `${blockName} - ${title}`;
     return (
       <LearnLayout>
+        <Grid>
+          <Row>
+            <Col xs={12}>
               <Spacer />
               <div>
                 <ChallengeTitle>{blockNameTitle}</ChallengeTitle>
@@ -170,6 +189,7 @@ export class BackEnd extends Component {
   *
   *
   */`}
+                  dimensions={this.state}
                   height={150}
                   output={output}
                 />
@@ -178,8 +198,11 @@ export class BackEnd extends Component {
                 <TestSuite tests={tests} />
               </div>
               <Spacer />
+            </Col>
             <CompletionModal />
             <HelpModal />
+          </Row>
+        </Grid>
       </LearnLayout>
     );
   }

client/src/templates/Challenges/components/Challenge-Description.js

@@ -1,6 +1,5 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Col, Row } from '@freecodecamp/react-bootstrap';
 
 import './challenge-description.css';
 
@@ -12,8 +11,7 @@ const propTypes = {
 
 function ChallengeDescription({ description, instructions, section }) {
   return (
-    <Row>
+    <div className={`challenge-instructions ${section}`}>
-      <Col className={`challenge-instructions ${section}`} xs={12}>
       <div dangerouslySetInnerHTML={{ __html: description }} />
       {instructions ? (
         <Fragment>
@@ -24,8 +22,7 @@ function ChallengeDescription({ description, instructions, section }) {
       ) : (
         <hr />
       )}
-      </Col>
+    </div>
-    </Row>
   );
 }