massive visual overhaul

src/components/settings_modal/helpers/attachment_setting.vue

@@ -1,10 +1,11 @@
 <template>
   <span
     v-if="matchesExpertLevel"
-    class="AttachmentSetting"
+    class="AttachmentSetting setting-item"
     :class="{ '-compact': compact }"
   >
     <label
+      class="setting-label"
       :for="path"
       :class="{ 'faint': shouldBeDisabled }"
     >

src/components/settings_modal/helpers/boolean_setting.vue

@@ -1,9 +1,10 @@
 <template>
   <label
     v-if="matchesExpertLevel"
-    class="BooleanSetting"
+    class="BooleanSetting setting-item"
   >
     <Checkbox
+      class="setting-control setting-label"
       :model-value="visibleState"
       :disabled="shouldBeDisabled"
       :indeterminate="isIndeterminate"
@@ -13,6 +14,12 @@
         class="label"
         :class="{ 'faint': shouldBeDisabled }"
       >
+        <ModifiedIndicator
+          :changed="isChanged"
+          :onclick="reset"
+        />
+        <ProfileSettingIndicator :is-profile="isProfileSetting" />
+        {{ ' ' }}
         <template v-if="backendDescriptionLabel">
           {{ backendDescriptionLabel }}
         </template>
@@ -22,13 +29,6 @@
         <slot v-else />
       </span>
     </Checkbox>
-    {{ ' ' }}
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
-    <DraftButtons />
     <p
       v-if="backendDescriptionDescription"
       class="setting-description"
@@ -36,7 +36,35 @@
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>
+    <DraftButtons />
   </label>
 </template>
 
 <script src="./boolean_setting.js"></script>
+
+<style lang="scss">
+.BooleanSetting {
+  display: grid;
+  grid-template-columns: subgrid;
+
+  .checkbox {
+    display: grid;
+    grid-template-columns: subgrid;
+  }
+
+  .label {
+    grid-area: label;
+    text-align: right;
+  }
+
+  .-mobile & {
+    .label {
+      text-align: left;
+    }
+  }
+
+  .checkbox-indicator {
+    grid-area: control;
+  }
+}
+</style>

src/components/settings_modal/helpers/choice_setting.vue

@@ -1,17 +1,25 @@
 <template>
   <label
     v-if="matchesExpertLevel"
-    class="ChoiceSetting"
+    class="ChoiceSetting setting-item"
     :class="{ 'faint': shouldBeDisabled }"
   >
-    <template v-if="backendDescriptionLabel">
-      {{ backendDescriptionLabel }}
-    </template>
-    <template v-else>
-      <slot />
-    </template>
-    {{ ' ' }}
+    <span class="setting-label">
+      <ModifiedIndicator
+        :changed="isChanged"
+        :onclick="reset"
+      />
+      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      {{ ' ' }}
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel }}
+      </template>
+      <template v-else>
+        <slot />
+      </template>
+    </span>
     <Select
+      class="setting-control"
       :model-value="realDraftMode ? draft : state"
       :disabled="shouldBeDisabled"
       @update:model-value="update"
@@ -25,11 +33,6 @@
         {{ option.value === defaultState ? $t('settings.instance_default_simple') : '' }}
       </option>
     </Select>
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
     <DraftButtons />
     <p
       v-if="backendDescriptionDescription"
@@ -41,3 +44,16 @@
 </template>
 
 <script src="./choice_setting.js"></script>
+
+<style lang="scss">
+.ChoiceSetting.setting-item {
+  .-mobile & {
+    display: block;
+
+    .setting-label {
+      display: block;
+      margin-bottom: 0.5em
+    }
+  }
+}
+</style>

src/components/settings_modal/helpers/color_setting.vue

@@ -1,7 +1,7 @@
 <template>
   <label
     v-if="matchesExpertLevel"
-    class="ColorSetting"
+    class="ColorSetting setting-item"
   >
     <label
       v-if="!hideLabel"

src/components/settings_modal/helpers/group_setting.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     v-if="matchesExpertLevel"
-    class="GroupSetting"
+    class="GroupSetting setting-item"
   >
     <ModifiedIndicator
       :changed="isChanged"

src/components/settings_modal/helpers/list_setting.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="matchesExpertLevel"
-    class="ListSetting"
+    class="ListSetting setting-item"
   >
     <label
       class="setting-label"

src/components/settings_modal/helpers/map_setting.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="matchesExpertLevel"
-    class="MapSetting"
+    class="MapSetting setting-item"
   >
     <label
       class="setting-label"

src/components/settings_modal/helpers/number_setting.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     v-if="matchesExpertLevel"
-    class="NumberSetting"
+    class="NumberSetting setting-item"
   >
     <label
       v-if="!hideLabel"
@@ -20,7 +20,7 @@
     {{ ' ' }}
     <input
       :id="path"
-      class="input number-input"
+      class="input number-input setting-control"
       type="number"
       :step="step || 1"
       :disabled="shouldBeDisabled"

src/components/settings_modal/helpers/proxy_setting.vue

@@ -1,7 +1,7 @@
 <template>
   <label
     v-if="matchesExpertLevel"
-    class="ProxySetting"
+    class="ProxySetting setting-item"
   >
     <label
       v-if="!hideLabel"

src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="matchesExpertLevel"
-    class="PWAManifestIconsSetting"
+    class="PWAManifestIconsSetting setting-item"
   >
     <label
       class="setting-label"

src/components/settings_modal/helpers/rate_setting.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="matchesExpertLevel"
-    class="RateSetting"
+    class="RateSetting setting-item"
   >
     <label
       class="setting-label"

src/components/settings_modal/helpers/string_setting.vue

@@ -1,7 +1,7 @@
 <template>
-  <label
+  <span
     v-if="matchesExpertLevel"
-    class="StringSetting"
+    class="StringSetting setting-item"
   >
     <label
       v-if="!hideLabel"
@@ -9,6 +9,12 @@
       class="setting-label"
       :class="{ 'faint': shouldBeDisabled }"
     >
+      <ModifiedIndicator
+        :changed="isChanged"
+        :onclick="reset"
+      />
+      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      {{ ' ' }}
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
@@ -17,10 +23,9 @@
       </template>
       <slot v-else />
     </label>
-    {{ ' ' }}
     <input
       :id="path"
-      class="input string-input"
+      class="setting-control input string-input"
       :class="{ disabled: shouldBeDisabled }"
       :disabled="shouldBeDisabled"
       :placeholder="backendDescriptionSuggestions"
@@ -28,11 +33,6 @@
       @change="update"
     >
     {{ ' ' }}
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
     <DraftButtons v-if="!hideDraftButtons" />
     <p
       v-if="backendDescriptionDescription"
@@ -41,7 +41,7 @@
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>
-  </label>
+  </span>
 </template>
 
 <script src="./string_setting.js"></script>

src/components/settings_modal/helpers/tuple_setting.vue

@@ -1,7 +1,7 @@
 <template>
-  <label
+  <span
+    class="setting-item"
     v-if="matchesExpertLevel"
-    class="TupleSetting"
   >
     <label
       v-if="!hideLabel"
@@ -9,6 +9,12 @@
       class="setting-label"
       :class="{ 'faint': shouldBeDisabled }"
     >
+      <ModifiedIndicator
+        :changed="isChanged"
+        :onclick="reset"
+      />
+      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      {{ ' ' }}
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
@@ -17,42 +23,27 @@
       </template>
       <slot v-else />
     </label>
-    {{ ' ' }}
-    <input
-      :id="path"
-      class="input string-input"
-      :class="{ disabled: shouldBeDisabled }"
-      :disabled="shouldBeDisabled"
-      :placeholder="backendDescriptionSuggestions?.[0]?.[0]"
-      :value="visibleState?.tuple?.[0]"
-      @change="e => update({ e, side: 0 })"
-    >
-    {{ ' ' }}
-    <input
-      :id="path"
-      class="input string-input"
-      :class="{ disabled: shouldBeDisabled }"
-      :disabled="shouldBeDisabled"
-      :placeholder="backendDescriptionSuggestions?.[0]?.[1]"
-      :value="visibleState?.tuple?.[1]"
-      @change="e => update({ e, side: 1 })"
-    >
-    {{ ' ' }}
-    <input
-      :id="path"
-      class="input string-input"
-      :class="{ disabled: shouldBeDisabled }"
-      :disabled="shouldBeDisabled"
-      :placeholder="backendDescriptionSuggestions?.[0]?.[1]"
-      :value="visibleState?.tuple?.[2]"
-      @change="e => update({ e, side: 2 })"
-    >
-    {{ ' ' }}
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <span class="setting-control">
+      <input
+        :id="path"
+        class="input string-input"
+        :class="{ disabled: shouldBeDisabled }"
+        :disabled="shouldBeDisabled"
+        :placeholder="backendDescriptionSuggestions?.[0]?.[0]"
+        :value="visibleState?.tuple?.[0]"
+        @change="e => update({ e, side: 0 })"
+      >
+      {{ ' ' }}
+      <input
+        :id="path"
+        class="input string-input"
+        :class="{ disabled: shouldBeDisabled }"
+        :disabled="shouldBeDisabled"
+        :placeholder="backendDescriptionSuggestions?.[0]?.[1]"
+        :value="visibleState?.tuple?.[1]"
+        @change="e => update({ e, side: 1 })"
+      >
+    </span>
     <DraftButtons v-if="!hideDraftButtons" />
     <p
       v-if="backendDescriptionDescription"
@@ -61,7 +52,7 @@
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>
-  </label>
+  </span>
 </template>
 
 <script src="./tuple_setting.js"></script>

src/components/settings_modal/helpers/unit_setting.vue

@@ -1,16 +1,16 @@
 <template>
   <span
     v-if="matchesExpertLevel"
-    class="UnitSetting"
+    class="UnitSetting setting-item"
   >
     <label
       :for="path"
-      class="size-label"
+      class="setting-label size-label"
     >
       <slot />
     </label>
     {{ ' ' }}
-    <span class="no-break">
+    <span class="no-break setting-control">
       <input
         :id="path"
         class="input number-input"
@@ -50,7 +50,7 @@
 <style lang="scss">
 .UnitSetting {
   .no-break {
-    display: inline-block;
+    display: inline-flex;
   }
 
   .number-input {

src/components/settings_modal/helpers/vertical_tab_switcher.jsx

@@ -161,9 +161,11 @@ export default {
       const contentClasses = ['tab-content']
       if (props['full-width'] || props['full-width'] === '') {
         contentClasses.push('-full-width')
+        wrapperClasses.push('-full-width')
       }
       if (props['full-height'] || props['full-width'] === '') {
         contentClasses.push('-full-height')
+        wrapperClasses.push('-full-height')
       }
       return (
         <div class={wrapperClasses} >

src/components/settings_modal/helpers/vertical_tab_switcher.scss

@@ -26,24 +26,6 @@
   }
 
   > .contents {
-    flex: 1 0 35em;
-
-    .tab-content {
-      align-self: center;
-
-      &:not(.-full-width) {
-        max-width: 40em;
-      }
-
-      &.-full-width {
-        align-self: stretch;
-      }
-
-      &.-full-height {
-        flex: 1;
-      }
-    }
-
     .tab-content-label {
       box-sizing: border-box;
       margin: 0;
@@ -60,8 +42,24 @@
       flex: 1 1 auto;
       height: 100%;
       overflow-y: auto;
-      display: flex;
+      display: grid;
+      grid-template-columns: minmax(1em, 1fr) minmax(min-content, 45em) minmax(1em, 1fr);
+      grid-template-areas: ". content .";
       flex-direction: column;
+
+      .tab-content {
+        grid-area: content;
+
+        &.-full-width {
+          grid-column: 1 / 4;
+        }
+
+        &.-full-height {
+          > * {
+            height: 100%;
+          }
+        }
+      }
     }
 
     .tab-content-wrapper {