From 5b1278a7258159d1cceff4d7c40d3c8f6814df68 Mon Sep 17 00:00:00 2001
From: eolculnamo2 <rbertram8@gmail.com>
Date: Tue, 19 Jun 2018 23:28:36 -0500
Subject: [PATCH] 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                               |  3 +++
 common/app/routes/Settings/Settings.jsx             |  2 ++
 .../app/routes/Settings/Toggle-Button/toggle.less   |  1 +
 common/app/routes/Settings/settings.less            | 13 +++++++++++++
 4 files changed, 19 insertions(+)

diff --git a/client/less/main.less b/client/less/main.less
index 124b5c6fa9..ed1c05c103 100644
--- a/client/less/main.less
+++ b/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 {
diff --git a/common/app/routes/Settings/Settings.jsx b/common/app/routes/Settings/Settings.jsx
index e03af489ee..513ae584e1 100644
--- a/common/app/routes/Settings/Settings.jsx
+++ b/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>
     );
   }
diff --git a/common/app/routes/Settings/Toggle-Button/toggle.less b/common/app/routes/Settings/Toggle-Button/toggle.less
index c08d8d970f..4ff123406d 100644
--- a/common/app/routes/Settings/Toggle-Button/toggle.less
+++ b/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;
diff --git a/common/app/routes/Settings/settings.less b/common/app/routes/Settings/settings.less
index fe86003be7..bd75adc77a 100644
--- a/common/app/routes/Settings/settings.less
+++ b/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 {