better settings on mobile

src/App.js

@@ -67,6 +67,9 @@ export default {
     themeApplied () {
       return this.$store.state.interface.themeApplied
     },
+    layoutModalClass () {
+      return '-' + this.layoutType
+    },
     classes () {
       return [
         {

src/App.vue

@@ -70,7 +70,7 @@
     <PostStatusModal />
     <EditStatusModal v-if="editingAvailable" />
     <StatusHistoryModal v-if="editingAvailable" />
-    <SettingsModal />
+    <SettingsModal :class="layoutModalClass"/>
     <UpdateNotification />
     <GlobalNoticeList />
   </div>

src/components/settings_modal/helpers/unit_setting.vue

@@ -10,6 +10,7 @@
       <slot />
     </label>
     {{ ' ' }}
+    <span class="no-break">
       <input
         :id="path"
         class="input number-input"
@@ -35,6 +36,7 @@
           {{ getUnitString(option) }}
         </option>
       </Select>
+    </span>
     {{ ' ' }}
     <ModifiedIndicator
       :changed="isChanged"
@@ -47,6 +49,10 @@
 
 <style lang="scss">
 .UnitSetting {
+  .no-break {
+    display: inline-block;
+  }
+
   .number-input {
     max-width: 6.5em;
     text-align: right;

src/components/settings_modal/settings_modal.scss

@@ -76,6 +76,23 @@
     }
   }
 
+  &.-mobile {
+    .setting-list,
+    .option-list {
+      padding-left: 0.25em;
+
+      > li {
+        margin: 1em 0;
+        line-height: 1.5em;
+        vertical-align: center;
+      }
+
+      &.two-column {
+        column-count: 1;
+      }
+    }
+  }
+
   &.peek {
     .settings-modal-panel {
       /* Explanation: