fix(Settings): Always use ChildContainer

othersize content is rendered off screen

common/app/routes/Settings/Settings-Skeleton.jsx

@@ -19,7 +19,7 @@ const shortString = (
 
 export default function SettingsSkeleton() {
   return (
-    <div className={ `${ns}-skeleton` }>
+    <div className={ `${ns}-container ${ns}-skeleton` }>
       <Row>
         <Col xs={ 12 }>
           <Button

common/app/routes/Settings/Settings.jsx

@@ -6,15 +6,15 @@ import { createSelector } from 'reselect';
 import { Button, Row, Col } from 'react-bootstrap';
 import FA from 'react-fontawesome';
 
+import ns from './ns.json';
 import LockedSettings from './Locked-Settings.jsx';
 import JobSettings from './Job-Settings.jsx';
 import SocialSettings from './Social-Settings.jsx';
 import EmailSettings from './Email-Setting.jsx';
 import LanguageSettings from './Language-Settings.jsx';
 import SettingsSkeleton from './Settings-Skeleton.jsx';
-import UpdateEmail from './routes/update-email';
 
-import { toggleUserFlag, showUpdateEmailViewSelector } from './redux';
+import { toggleUserFlag } from './redux';
 import {
   toggleNightMode,
   updateTitle,
@@ -24,13 +24,11 @@ import {
   themeSelector,
   hardGoTo
 } from '../../redux';
-import ChildContainer from '../../Child-Container.jsx';
 
 const mapStateToProps = createSelector(
   userSelector,
   themeSelector,
   signInLoadingSelector,
-  showUpdateEmailViewSelector,
   (
     {
       username,
@@ -46,7 +44,6 @@ const mapStateToProps = createSelector(
     },
     theme,
     showLoading,
-    showUpdateEmailView
   ) => ({
     currentTheme: theme,
     email,
@@ -59,7 +56,6 @@ const mapStateToProps = createSelector(
     sendNotificationEmail,
     sendQuincyEmail,
     showLoading,
-    showUpdateEmailView,
     username
   })
 );
@@ -91,7 +87,6 @@ const propTypes = {
   sendNotificationEmail: PropTypes.bool,
   sendQuincyEmail: PropTypes.bool,
   showLoading: PropTypes.bool,
-  showUpdateEmailView: PropTypes.bool,
   toggleIsAvailableForHire: PropTypes.func.isRequired,
   toggleIsLocked: PropTypes.func.isRequired,
   toggleMonthlyEmail: PropTypes.func.isRequired,
@@ -137,7 +132,6 @@ export class Settings extends React.Component {
       sendNotificationEmail,
       sendQuincyEmail,
       showLoading,
-      showUpdateEmailView,
       toggleIsAvailableForHire,
       toggleIsLocked,
       toggleMonthlyEmail,
@@ -149,181 +143,176 @@ export class Settings extends React.Component {
     if (!username && showLoading) {
       return <SettingsSkeleton />;
     }
-    if (showUpdateEmailView) {
-      return <UpdateEmail />;
-    }
     return (
-      <ChildContainer>
-        <div className='container'>
-          <Row>
-            <Col xs={ 12 }>
-              <Button
-                block={ true }
-                bsSize='lg'
-                bsStyle='primary'
-                className='btn-link-social'
-                href={ `/${username}` }
-                >
-                <FA name='user' />
-                Show me my public profile
-              </Button>
-              <Button
-                block={ true }
-                bsSize='lg'
-                bsStyle='primary'
-                className='btn-link-social'
-                href={ '/signout' }
-                >
-                Sign me out of freeCodeCamp
-              </Button>
-              <Button
-                block={ true }
-                bsSize='lg'
-                bsStyle='primary'
-                className='btn-link-social'
-                href={ 'mail:team@freecodecamp.com' }
-                >
-                Email us at team@freecodecamp.com
-              </Button>
-            </Col>
-          </Row>
-          <h1 className='text-center'>Settings for your Account</h1>
-          <h2 className='text-center'>Actions</h2>
-          <Row>
-            <Col xs={ 12 }>
-              <Button
-                block={ true }
-                bsSize='lg'
-                bsStyle='primary'
-                className='btn-link-social'
-                onClick={ () => toggleNightMode(username, currentTheme) }
-                >
-                Toggle Night Mode
-              </Button>
-            </Col>
-          </Row>
-          <Row>
-            <Col xs={ 12 }>
-              <SocialSettings
-                isGithubCool={ isGithubCool }
-                isLinkedIn={ isLinkedIn }
-                isTwitter={ isTwitter }
-              />
-            </Col>
-          </Row>
-          <div className='spacer' />
-          <h2 className='text-center'>Account Settings</h2>
-          <Row>
-            <Col xs={ 12 }>
-              <Button
-                block={ true }
-                bsSize='lg'
-                bsStyle='primary'
-                className='btn-link-social'
-                href='/commit'
-                >
-                Edit my pledge
-              </Button>
-            </Col>
-          </Row>
-          <div className='spacer' />
-          <h2 className='text-center'>Privacy Settings</h2>
-          <Row>
-            <Col
-              md={ 6 }
-              mdOffset={ 3 }
-              sm={ 8 }
-              smOffset={ 2 }
-              xs={ 12 }
+      <div className={ `${ns}-container` }>
+        <Row>
+          <Col xs={ 12 }>
+            <Button
+              block={ true }
+              bsSize='lg'
+              bsStyle='primary'
+              className='btn-link-social'
+              href={ `/${username}` }
               >
-              <LockedSettings
-                isLocked={ isLocked }
-                toggle={ toggleIsLocked }
-              />
-            </Col>
-          </Row>
-          <div className='spacer' />
-          <h2 className='text-center'>Job Search Settings</h2>
-          <Row>
-            <Col
-              md={ 6 }
-              mdOffset={ 3 }
-              sm={ 8 }
-              smOffset={ 2 }
-              xs={ 12 }
+              <FA name='user' />
+              Show me my public profile
+            </Button>
+            <Button
+              block={ true }
+              bsSize='lg'
+              bsStyle='primary'
+              className='btn-link-social'
+              href={ '/signout' }
               >
-              <JobSettings
-                isAvailableForHire={ isAvailableForHire }
-                toggle={ toggleIsAvailableForHire }
-              />
-            </Col>
-          </Row>
-          <div className='spacer' />
-          <h2 className='text-center'>Email Settings</h2>
-          <Row>
-            <Col
-              md={ 6 }
-              mdOffset={ 3 }
-              sm={ 8 }
-              smOffset={ 2 }
-              xs={ 12 }
+              Sign me out of freeCodeCamp
+            </Button>
+            <Button
+              block={ true }
+              bsSize='lg'
+              bsStyle='primary'
+              className='btn-link-social'
+              href={ 'mail:team@freecodecamp.com' }
               >
-              <EmailSettings
-                email={ email }
-                sendMonthlyEmail={ sendMonthlyEmail }
-                sendNotificationEmail={ sendNotificationEmail }
-                sendQuincyEmail={ sendQuincyEmail }
-                toggleMonthlyEmail={ toggleMonthlyEmail }
-                toggleNotificationEmail={ toggleNotificationEmail }
-                toggleQuincyEmail={ toggleQuincyEmail }
-              />
-            </Col>
-          </Row>
-          <div className='spacer' />
-          <h2 className='text-center'>Display challenges in:</h2>
-          <Row>
-            <Col
-              md={ 6 }
-              mdOffset={ 3 }
-              sm={ 8 }
-              smOffset={ 2 }
-              xs={ 12 }
+              Email us at team@freecodecamp.com
+            </Button>
+          </Col>
+        </Row>
+        <h1 className='text-center'>Settings for your Account</h1>
+        <h2 className='text-center'>Actions</h2>
+        <Row>
+          <Col xs={ 12 }>
+            <Button
+              block={ true }
+              bsSize='lg'
+              bsStyle='primary'
+              className='btn-link-social'
+              onClick={ () => toggleNightMode(username, currentTheme) }
               >
-              <LanguageSettings />
-            </Col>
-          </Row>
-          <div className='spacer' />
-          <h2 className='text-center'>Danger Zone</h2>
-          <Row>
-            <Col
-              md={ 6 }
-              mdOffset={ 3 }
-              sm={ 8 }
-              smOffset={ 2 }
-              xs={ 12 }
+              Toggle Night Mode
+            </Button>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={ 12 }>
+            <SocialSettings
+              isGithubCool={ isGithubCool }
+              isLinkedIn={ isLinkedIn }
+              isTwitter={ isTwitter }
+            />
+          </Col>
+        </Row>
+        <div className='spacer' />
+        <h2 className='text-center'>Account Settings</h2>
+        <Row>
+          <Col xs={ 12 }>
+            <Button
+              block={ true }
+              bsSize='lg'
+              bsStyle='primary'
+              className='btn-link-social'
+              href='/commit'
               >
-              <Button
-                block={ true }
-                bsSize='lg'
-                bsStyle='danger'
-                className='btn-link-social'
-                href='/delete-my-account'
-                >
-                Delete my freeCodeCamp account
-              </Button>
-              <Button
-                block={ true }
-                bsSize='lg'
-                bsStyle='danger'
-                className='btn-link-social'
-                href='/reset-my-progress'
-                >
-                Reset all of my progress and brownie points
-              </Button>
-            </Col>
-          </Row>
+              Edit my pledge
+            </Button>
+          </Col>
+        </Row>
+        <div className='spacer' />
+        <h2 className='text-center'>Privacy Settings</h2>
+        <Row>
+          <Col
+            md={ 6 }
+            mdOffset={ 3 }
+            sm={ 8 }
+            smOffset={ 2 }
+            xs={ 12 }
+            >
+            <LockedSettings
+              isLocked={ isLocked }
+              toggle={ toggleIsLocked }
+            />
+          </Col>
+        </Row>
+        <div className='spacer' />
+        <h2 className='text-center'>Job Search Settings</h2>
+        <Row>
+          <Col
+            md={ 6 }
+            mdOffset={ 3 }
+            sm={ 8 }
+            smOffset={ 2 }
+            xs={ 12 }
+            >
+            <JobSettings
+              isAvailableForHire={ isAvailableForHire }
+              toggle={ toggleIsAvailableForHire }
+            />
+          </Col>
+        </Row>
+        <div className='spacer' />
+        <h2 className='text-center'>Email Settings</h2>
+        <Row>
+          <Col
+            md={ 6 }
+            mdOffset={ 3 }
+            sm={ 8 }
+            smOffset={ 2 }
+            xs={ 12 }
+            >
+            <EmailSettings
+              email={ email }
+              sendMonthlyEmail={ sendMonthlyEmail }
+              sendNotificationEmail={ sendNotificationEmail }
+              sendQuincyEmail={ sendQuincyEmail }
+              toggleMonthlyEmail={ toggleMonthlyEmail }
+              toggleNotificationEmail={ toggleNotificationEmail }
+              toggleQuincyEmail={ toggleQuincyEmail }
+            />
+          </Col>
+        </Row>
+        <div className='spacer' />
+        <h2 className='text-center'>Display challenges in:</h2>
+        <Row>
+          <Col
+            md={ 6 }
+            mdOffset={ 3 }
+            sm={ 8 }
+            smOffset={ 2 }
+            xs={ 12 }
+            >
+            <LanguageSettings />
+          </Col>
+        </Row>
+        <div className='spacer' />
+        <h2 className='text-center'>Danger Zone</h2>
+        <Row>
+          <Col
+            md={ 6 }
+            mdOffset={ 3 }
+            sm={ 8 }
+            smOffset={ 2 }
+            xs={ 12 }
+            >
+            <Button
+              block={ true }
+              bsSize='lg'
+              bsStyle='danger'
+              className='btn-link-social'
+              href='/delete-my-account'
+              >
+              Delete my freeCodeCamp account
+            </Button>
+            <Button
+              block={ true }
+              bsSize='lg'
+              bsStyle='danger'
+              className='btn-link-social'
+              href='/reset-my-progress'
+              >
+              Reset all of my progress and brownie points
+            </Button>
+          </Col>
+        </Row>
       </div>
-      </ChildContainer>
     );
   }
 }

common/app/routes/Settings/Show.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import ns from './ns.json';
+import { showUpdateEmailViewSelector } from './redux';
+import Settings from './Settings.jsx';
+import UpdateEmail from './routes/update-email';
+import ChildContainer from '../../Child-Container.jsx';
+
+const mapStateToProps = state => ({
+  showUpdateEmailView: showUpdateEmailViewSelector(state)
+});
+const mapDispatchToProps = null;
+const propTypes = {
+  showUpdateEmailView: PropTypes.bool
+};
+
+export function ShowSettings({ showUpdateEmailView }) {
+  let Comp = Settings;
+  if (showUpdateEmailView) {
+    Comp = UpdateEmail;
+  }
+  return (
+    <ChildContainer>
+      <div className={ `${ns}-container` }>
+        <Comp />
+      </div>
+    </ChildContainer>
+  );
+}
+ShowSettings.displayName = 'ShowSettings';
+ShowSettings.propTypes = propTypes;
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ShowSettings);

common/app/routes/Settings/settings.less

@@ -15,6 +15,9 @@
   }
 }
 
+.@{ns}-container {
+  .center(@value: @container-xl, @padding: @grid-gutter-width);
+}
 .@{ns}-skeleton {
   background-color: #fff;
   z-index: 10;