fix(settings): Fix layout issues that caused horizontal scrolling

Closes #17931

common/app/routes/Settings/Settings.jsx

@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Button } from 'react-bootstrap';
 
-import ns from './ns.json';
 import { FullWidthRow, Spacer, Loader } from '../../helperComponents';
 import AboutSettings from './components/About-Settings.jsx';
 import InternetSettings from './components/Internet-Settings.jsx';
@@ -53,7 +52,6 @@ const propTypes = {
 };
 
 export class Settings extends React.Component {
-
   componentWillMount() {
     this.props.updateTitle('Settings');
   }
@@ -73,7 +71,7 @@ export class Settings extends React.Component {
       return <Loader />;
     }
     return (
-      <div className={ `${ns}-container` }>
+      <div>
         <FullWidthRow>
             <Button
               block={ true }
@@ -95,7 +93,6 @@ export class Settings extends React.Component {
           </Button>
         </FullWidthRow>
         <h1 className='text-center'>{ `Account Settings for ${username}` }</h1>
-        <div className='offset-negative-row'>
         <AboutSettings />
         <Spacer />
         <PrivacySettings />
@@ -112,7 +109,6 @@ export class Settings extends React.Component {
         <Spacer />
         <DangerZone />
       </div>
-      </div>
     );
   }
 }

common/app/routes/Settings/ShowSettings.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { Grid } from 'react-bootstrap';
 
 import ns from './ns.json';
 import { showUpdateEmailViewSelector } from './redux';
@@ -11,28 +12,30 @@ 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;
+  let ChildComponent = Settings;
+
   if (showUpdateEmailView) {
-    Comp = UpdateEmail;
+    ChildComponent = UpdateEmail;
   }
+
   return (
     <ChildContainer>
-      <div className={ `${ns}-container` }>
-        <Comp />
-      </div>
+      <Grid className={ `${ns}-container` }>
+        <ChildComponent />
+      </Grid>
     </ChildContainer>
   );
 }
+
 ShowSettings.displayName = 'ShowSettings';
 ShowSettings.propTypes = propTypes;
 
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+  mapStateToProps
 )(ShowSettings);

common/app/routes/Settings/index.js

@@ -1,6 +1,6 @@
 import { types } from './redux';
 
-export { default } from './Show.jsx';
+export { default } from './ShowSettings.jsx';
 
 export const routes = {
   [types.onRouteSettings]: '/settings',

common/app/routes/Settings/routes/update-email/Update-Email.jsx

@@ -27,26 +27,32 @@ const fields = [
 ];
 const validateFields = ({ email, duplicate }) => {
   const errors = {};
+
   if (!isEmail('' + email)) {
     errors.email = 'This email is invalid.';
   }
+
   if (duplicate && email !== duplicate) {
     errors.duplicate = 'This email does not match the one above.';
   }
+
   return errors;
 };
+
 const mapStateToProps = state => {
   const {
     app: { user: username },
     entities: { user: userMap }
   } = state;
   const { email, emailVerified } = userMap[username] || {};
+
   return {
     initialValues: { email },
     isEmailThere: !!email,
     isVerified: !!emailVerified
   };
 };
+
 const propTypes = {
   fields: PropTypes.object.isRequired,
   handleSubmit: PropTypes.func.isRequired,
@@ -61,6 +67,7 @@ export class UpdateEmail extends React.Component {
     super(...props);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
+
   handleSubmit(e) {
     e.preventDefault();
     this.props.handleSubmit(({ email }) => this.props.updateMyEmail(email))(e);

common/app/routes/Settings/settings.less

@@ -28,11 +28,6 @@
   }
 }
 
-.offset-negative-row{
-  margin-right: 15px;
-  margin-left: 15px;
-}
-
 .@{ns}-container {
   .center(@value: @container-xl, @padding: @grid-gutter-width);