style(Settings): Improve mobile responsiveness of settings page

added flex wrap to many of the flexed items targeted at mobile with
media queries so they would properly collapse. Also off set the -15px
horizontal margins added by react bootstrap which made much of the text
touch the side of the screen.

BREAKING CHANGE: none

client/less/main.less

@@ -337,6 +337,9 @@ p.stats {
   max-width: 400px;
   margin: auto;
   margin-bottom: 10px;
+  @media (max-width: 450px) {
+    max-width: 90vw;
+  }
 }
 
 a {

common/app/routes/Settings/Settings.jsx

@@ -98,6 +98,7 @@ 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 />
@@ -113,6 +114,7 @@ export class Settings extends React.Component {
         <CertificationSettings />
         <Spacer />
         <DangerZone />
+        </div>
       </div>
     );
   }

common/app/routes/Settings/Toggle-Button/toggle.less

@@ -1,6 +1,7 @@
 @ns: toggle;
 
 .@{ns}-container > .btn-group {
+  min-width: 180px;
   float: right;
   .btn {
     margin-top: 20px;

common/app/routes/Settings/settings.less

@@ -28,6 +28,11 @@
   }
 }
 
+.offset-negative-row{
+  margin-right: 15px;
+  margin-left: 15px;
+}
+
 .@{ns}-container {
   .center(@value: @container-xl, @padding: @grid-gutter-width);
 
@@ -81,6 +86,10 @@
     .btn-group > label {
       margin: 10px 0;
     }
+    @media (max-width: 450px){
+      flex-wrap: wrap;
+      border-bottom: 1px solid #e0e0e0;
+    }
   }
 
   label {
@@ -104,6 +113,10 @@
 
   input, textarea {
     background-color: #fff;
+    margin: 5px 0;
+  }
+  @media (max-width: 450px) {
+    flex-wrap: wrap;
   }
 }
 .edit-preview-tabs {