From 545d2a9d924f72e158983a5eb623676890e8d71d Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Wed, 31 Jan 2018 09:06:06 -0800
Subject: [PATCH] tweak style for mobile

---
 .../settings/_components/SettingsLayout.html  |  5 +++
 routes/settings/_components/SettingsList.html | 32 ++++++++++++-------
 .../_components/SettingsListItem.html         | 12 +++++++
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/routes/settings/_components/SettingsLayout.html b/routes/settings/_components/SettingsLayout.html
index b761d464..e5cf55f6 100644
--- a/routes/settings/_components/SettingsLayout.html
+++ b/routes/settings/_components/SettingsLayout.html
@@ -15,6 +15,11 @@
   :global(.settings .free-text h2) {
     margin: 20px 0 10px;
   }
+  @media (max-width: 767px) {
+    .settings {
+      margin: 20px 10px;
+    }
+  }
 </style>
 <script>
   import SettingsNav from './SettingsNav.html';
diff --git a/routes/settings/_components/SettingsList.html b/routes/settings/_components/SettingsList.html
index 8b70c30d..062c01d1 100644
--- a/routes/settings/_components/SettingsList.html
+++ b/routes/settings/_components/SettingsList.html
@@ -1,18 +1,28 @@
-{{#if label}}
-<ul class="settings-list" aria-label="{{label}}">
-  <slot></slot>
-</ul>
-{{else}}
-<ul class="settings-list">
-  <slot></slot>
-</ul>
-{{/if}}
+<div class="settings-list-wrapper">
+  {{#if label}}
+  <ul class="settings-list" aria-label="{{label}}">
+    <slot></slot>
+  </ul>
+  {{else}}
+  <ul class="settings-list">
+    <slot></slot>
+  </ul>
+  {{/if}}
+</div>
 <style>
+  .settings-list-wrapper {
+    margin: 20px 20px;
+  }
   ul.settings-list {
     list-style: none;
     width: 100%;
     border: 1px solid var(--settings-list-item-border);
-    margin: 20px auto;
-    max-width: 80%;
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
+  @media (max-width: 767px) {
+    .settings-list-wrapper {
+      margin: 20px 0;
+    }
   }
 </style>
\ No newline at end of file
diff --git a/routes/settings/_components/SettingsListItem.html b/routes/settings/_components/SettingsListItem.html
index dfafae99..48976866 100644
--- a/routes/settings/_components/SettingsListItem.html
+++ b/routes/settings/_components/SettingsListItem.html
@@ -55,4 +55,16 @@
     text-overflow: ellipsis;
   }
 
+  @media (max-width: 767px) {
+    .settings-list-item a {
+      padding: 20px 10px;
+    }
+    .settings-list-item svg {
+      margin-right: 10px;
+    }
+    .settings-list-item .offset-for-icon {
+      margin-left: 34px;
+    }
+  }
+
 </style>
\ No newline at end of file