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,12 +143,8 @@ export class Settings extends React.Component {
     if (!username && showLoading) {
       return <SettingsSkeleton />;
     }
-    if (showUpdateEmailView) {
-      return <UpdateEmail />;
-    }
     return (
-      <ChildContainer>
+      <div className={ `${ns}-container` }>
-        <div className='container'>
         <Row>
           <Col xs={ 12 }>
             <Button
@@ -323,7 +313,6 @@ export class Settings extends React.Component {
           </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;