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,31 +10,33 @@
       <slot />
     </label>
     {{ ' ' }}
-    <input
+    <span class="no-break">
-      :id="path"
+      <input
-      class="input number-input"
+        :id="path"
-      type="number"
+        class="input number-input"
-      :step="step"
+        type="number"
-      :disabled="disabled"
+        :step="step"
-      :min="min || 0"
+        :disabled="disabled"
-      :value="stateValue"
+        :min="min || 0"
-      @change="updateValue"
+        :value="stateValue"
-    >
+        @change="updateValue"
-    <Select
-      :id="path"
-      :model-value="stateUnit"
-      :disabled="disabled"
-      class="unit-input unstyled"
-      @change="updateUnit"
-    >
-      <option
-        v-for="option in units"
-        :key="option"
-        :value="option"
       >
-        {{ getUnitString(option) }}
+      <Select
-      </option>
+        :id="path"
-    </Select>
+        :model-value="stateUnit"
+        :disabled="disabled"
+        class="unit-input unstyled"
+        @change="updateUnit"
+      >
+        <option
+          v-for="option in units"
+          :key="option"
+          :value="option"
+        >
+          {{ 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: