tweak style for mobile

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';

routes/settings/_components/SettingsList.html

@@ -1,18 +1,28 @@
-{{#if label}}
+<div class="settings-list-wrapper">
-<ul class="settings-list" aria-label="{{label}}">
+  {{#if label}}
-  <slot></slot>
+  <ul class="settings-list" aria-label="{{label}}">
-</ul>
+    <slot></slot>
-{{else}}
+  </ul>
-<ul class="settings-list">
+  {{else}}
-  <slot></slot>
+  <ul class="settings-list">
-</ul>
+    <slot></slot>
-{{/if}}
+  </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;
+    margin: 0 auto;
-    max-width: 80%;
+    box-sizing: border-box;
+  }
+  @media (max-width: 767px) {
+    .settings-list-wrapper {
+      margin: 20px 0;
+    }
   }
 </style>

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>