Merge branch 'feature/settings-label-position' into 'develop'

Update setting's label position and shorten suggestions in select inputs Closes #101 See merge request pleroma/admin-fe!124
2020-04-27 22:38:04 +00:00 · 2020-04-27 22:38:04 +00:00 · 99ce098c37
commit 99ce098c37
parent 08f96d5881 aea87c46c8
24 changed files with 297 additions and 84 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -16,6 +16,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Make Instance Reboot button's positon fixed on Settings page
 - Update jest and babel-jest
 - Generate an invite link when an invite token has been generated
+- Put labels on top of inputs in mobile version
+- Shorten suggestions for a series of select inputs: Rewrite policy, Pleroma Authenticator, Captcha Method, Mailer adapter, Metadata providers, Rich Media parsers, TTL setters, Scrub policy, Uploader, Filters and Federation publisher modules

 ### Fixed

--- a/src/views/settings/components/ActivityPub.vue
+++ b/src/views/settings/components/ActivityPub.vue
@ -1,10 +1,10 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="activitypubData" :model="activitypubData" :label-width="labelWidth" data-search=":activitypub">
+    <el-form ref="activitypubData" :model="activitypubData" :label-position="labelPosition" :label-width="labelWidth" data-search=":activitypub">
      <setting :setting-group="activitypub" :data="activitypubData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="userData" :model="userData" :label-width="labelWidth" data-search=":user">
+    <el-form ref="userData" :model="userData" :label-position="labelPosition" :label-width="labelWidth" data-search=":user">
      <setting :setting-group="user" :data="userData"/>
    </el-form>
    <div class="submit-button-container">
@ -41,6 +41,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/Authentication.vue
+++ b/src/views/settings/components/Authentication.vue
@ -1,18 +1,18 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="pleromaAuthenticatorData" :model="pleromaAuthenticatorData" :label-width="labelWidth">
+    <el-form ref="pleromaAuthenticatorData" :model="pleromaAuthenticatorData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="pleromaAuthenticator" :data="pleromaAuthenticatorData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="authData" :model="authData" :label-width="labelWidth">
+    <el-form ref="authData" :model="authData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="auth" :data="authData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="ldapData" :model="ldapData" :label-width="labelWidth">
+    <el-form ref="ldapData" :model="ldapData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="ldap" :data="ldapData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="oauth2" :model="oauth2Data" :label-width="labelWidth">
+    <el-form ref="oauth2" :model="oauth2Data" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="oauth2" :data="oauth2Data"/>
    </el-form>
    <div class="submit-button-container">
@ -49,6 +49,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/AutoLinker.vue
+++ b/src/views/settings/components/AutoLinker.vue
@ -1,6 +1,6 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="autoLinker" :model="autoLinkerData" :label-width="labelWidth">
+    <el-form ref="autoLinker" :model="autoLinkerData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="autoLinker" :data="autoLinkerData"/>
    </el-form>
    <div class="submit-button-container">
@ -37,6 +37,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/Captcha.vue
+++ b/src/views/settings/components/Captcha.vue
@ -1,10 +1,10 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="captchaData" :model="captchaData" :label-width="labelWidth">
+    <el-form ref="captchaData" :model="captchaData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="captcha" :data="captchaData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="kocaptchaData" :model="kocaptchaData" :label-width="labelWidth">
+    <el-form ref="kocaptchaData" :model="kocaptchaData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="kocaptcha" :data="kocaptchaData"/>
    </el-form>
    <div class="submit-button-container">
@ -47,6 +47,9 @@ export default {
    kocaptchaData() {
      return _.get(this.settings.settings, [':pleroma', 'Pleroma.Captcha.Kocaptcha']) || {}
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/Esshd.vue
+++ b/src/views/settings/components/Esshd.vue
@ -1,6 +1,6 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="esshdData" :model="esshdData" :label-width="labelWidth">
+    <el-form ref="esshdData" :model="esshdData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="esshd" :data="esshdData"/>
    </el-form>
    <div class="submit-button-container">
@ -37,6 +37,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@ -1,33 +1,33 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="frontendData" :model="frontendData" :label-width="labelWidth">
+    <el-form ref="frontendData" :model="frontendData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="frontend" :data="frontendData"/>
    </el-form>
-    <el-form ref="staticFeData" :model="staticFeData" :label-width="labelWidth">
+    <el-form ref="staticFeData" :model="staticFeData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="staticFe" :data="staticFeData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="assetsData" :model="assetsData" :label-width="labelWidth">
+    <el-form ref="assetsData" :model="assetsData" :label-position="labelPosition" :label-width="labelWidth">
      <el-form-item class="grouped-settings-header">
-        <span class="label-font">{{ $t('settings.assets') }}</span>
+        <span class="label-font label-with-margin">{{ $t('settings.assets') }}</span>
      </el-form-item>
      <setting :setting-group="assets" :data="assetsData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
+    <el-form ref="emojiData" :model="emojiData" :label-position="labelPosition" :label-width="labelWidth">
      <el-form-item data-search=":emoji" class="grouped-settings-header">
-        <span class="label-font">{{ $t('settings.emoji') }}</span>
+        <span class="label-font label-with-margin">{{ $t('settings.emoji') }}</span>
      </el-form-item>
      <setting :setting-group="emoji" :data="emojiData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="chatData" :model="chatData" :label-width="labelWidth">
+    <el-form ref="chatData" :model="chatData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="chat" :data="chatData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="markupData" :model="markupData" :label-width="labelWidth">
+    <el-form ref="markupData" :model="markupData" :label-position="labelPosition" :label-width="labelWidth">
      <el-form-item data-search=":markup" class="grouped-settings-header">
-        <span class="label-font">{{ $t('settings.markup') }}</span>
+        <span class="label-font label-with-margin">{{ $t('settings.markup') }}</span>
      </el-form-item>
      <setting :setting-group="markup" :data="markupData"/>
    </el-form>
@ -83,6 +83,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/Gopher.vue
+++ b/src/views/settings/components/Gopher.vue
@ -1,6 +1,6 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form v-if="!loading" ref="gopher" :model="gopherData" :label-width="labelWidth">
+    <el-form v-if="!loading" ref="gopher" :model="gopherData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="gopher" :data="gopherData"/>
    </el-form>
    <div class="submit-button-container">
@ -37,6 +37,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/Http.vue
+++ b/src/views/settings/components/Http.vue
@ -1,24 +1,24 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="httpData" :model="httpData" :label-width="labelWidth">
+    <el-form ref="httpData" :model="httpData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="http" :data="httpData"/>
    </el-form>
-    <el-form ref="corsPlugData" :model="corsPlugData" :label-width="labelWidth">
+    <el-form ref="corsPlugData" :model="corsPlugData" :label-position="labelPosition" :label-width="labelWidth">
      <el-form-item data-search=":cors_plug" class="grouped-settings-header">
-        <span class="label-font">{{ $t('settings.corsPlug') }}</span>
+        <span class="label-font label-with-margin">{{ $t('settings.corsPlug') }}</span>
      </el-form-item>
      <setting :setting-group="corsPlug" :data="corsPlugData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="httpSignatures" :model="httpSignaturesData" :label-width="labelWidth">
+    <el-form ref="httpSignatures" :model="httpSignaturesData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="httpSignatures" :data="httpSignaturesData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="httpSecurityData" :model="httpSecurityData" :label-width="labelWidth">
+    <el-form ref="httpSecurityData" :model="httpSecurityData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="httpSecurity" :data="httpSecurityData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="webCacheTtl" :model="webCacheTtlData" :label-width="labelWidth">
+    <el-form ref="webCacheTtl" :model="webCacheTtlData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="webCacheTtl" :data="webCacheTtlData"/>
    </el-form>
    <div class="submit-button-container">
@ -73,6 +73,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@ -25,10 +25,10 @@
          :nested="true"/>
      </el-form-item>
    </div>
-    <el-form-item v-if="setting.type !== 'keyword'" :label-width="customLabelWidth" :class="labelClass">
+    <el-form-item v-if="setting.type !== 'keyword'" :label-width="customLabelWidth" :class="labelClass" :style="isDesktop ? '' : `margin-left:${margin}px`">
      <span slot="label">
        {{ setting.label }}
-        <el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
+        <el-tooltip v-if="canBeDeleted && (isDesktop || isMobile)" :content="$t('settings.removeFromDB')" placement="bottom-end">
          <el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeSetting"/>
        </el-tooltip>
      </span>
@ -55,7 +55,7 @@
          :data-search="setting.key || setting.group"
          @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
        <el-select
-          v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes('dropdown'))"
+          v-if="!reducedSelects && (setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes('dropdown')))"
          :value="inputValue === false ? 'false' : inputValue"
          :data-search="setting.key || setting.group"
          clearable
@ -67,8 +67,8 @@
            :key="index"/>
        </el-select>
        <el-select
-          v-if="renderMultipleSelect(setting.type)"
-          :value="setting.key === ':rewrite_policy' ? rewritePolicyValue : inputValue"
+          v-if="!reducedSelects && renderMultipleSelect(setting.type)"
+          :value="inputValue"
          :data-search="setting.key || setting.group"
          multiple
          filterable
@ -104,8 +104,9 @@
        <prune-input v-if="setting.key === ':prune'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
        <rate-limit-input v-if="settingGroup.key === ':rate_limit'" :data="data" :setting-group="settingGroup" :setting="setting"/>
        <reg-invites-input v-if="[':registrations_open', ':invites_enabled'].includes(setting.key)" :data="data" :setting-group="settingGroup" :setting="setting"/>
+        <select-input-with-reduced-labels v-if="reducedSelects" :data="data" :setting-group="settingGroup" :setting="setting"/>
        <!-------------------->
-        <el-tooltip v-if="canBeDeleted && (isMobile || isTablet)" :content="$t('settings.removeFromDB')" placement="bottom-end" class="delete-setting-button-container">
+        <el-tooltip v-if="canBeDeleted && isTablet" :content="$t('settings.removeFromDB')" placement="bottom-end" class="delete-setting-button-container">
          <el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeSetting"/>
        </el-tooltip>
      </div>
@ -129,7 +130,8 @@ import {
  ProxyUrlInput,
  PruneInput,
  RateLimitInput,
-  RegInvitesInput } from './inputComponents'
+  RegInvitesInput,
+  SelectInputWithReducedLabels } from './inputComponents'
 import { processNested } from '@/store/modules/normalizers'
 import _ from 'lodash'
 import marked from 'marked'
@ -146,7 +148,8 @@ export default {
    ProxyUrlInput,
    PruneInput,
    RateLimitInput,
-    RegInvitesInput
+    RegInvitesInput,
+    SelectInputWithReducedLabels
  },
  props: {
    customLabelWidth: {
@ -250,8 +253,20 @@ export default {
    keywordData() {
      return Array.isArray(this.data) ? this.data : []
    },
-    rewritePolicyValue() {
-      return typeof this.data[this.setting.key] === 'string' ? [this.data[this.setting.key]] : this.data[this.setting.key]
+    reducedSelects() {
+      return [
+        ':filters',
+        ':uploader',
+        ':federation_publisher_modules',
+        ':scrub_policy',
+        ':ttl_setters',
+        ':parsers',
+        ':providers',
+        ':method',
+        ':rewrite_policy',
+        'Pleroma.Web.Auth.Authenticator'
+      ].includes(this.setting.key) ||
+        (this.settingGroup.key === 'Pleroma.Emails.Mailer' && this.setting.key === ':adapter')
    },
    settings() {
      return this.$store.state.settings.settings
--- a/src/views/settings/components/Instance.vue
+++ b/src/views/settings/components/Instance.vue
@ -1,33 +1,33 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="instanceData" :model="instanceData" :label-width="labelWidth">
+    <el-form ref="instanceData" :model="instanceData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="instance" :data="instanceData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="adminToken" :model="adminTokenData" :label-width="labelWidth">
+    <el-form ref="adminToken" :model="adminTokenData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="adminToken" :data="adminTokenData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="scheduledActivity" :model="scheduledActivityData" :label-width="labelWidth">
+    <el-form ref="scheduledActivity" :model="scheduledActivityData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="scheduledActivity" :data="scheduledActivityData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="manifest" :model="manifestData" :label-width="labelWidth">
+    <el-form ref="manifest" :model="manifestData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="manifest" :data="manifestData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="pleromaUser" :model="pleromaUserData" :label-width="labelWidth" data-search="Pleroma.User">
+    <el-form ref="pleromaUser" :model="pleromaUserData" :label-position="labelPosition" :label-width="labelWidth" data-search="Pleroma.User">
      <setting :setting-group="pleromaUser" :data="pleromaUserData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="uriSchemes" :model="uriSchemesData" :label-width="labelWidth">
+    <el-form ref="uriSchemes" :model="uriSchemesData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="uriSchemes" :data="uriSchemesData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="feed" :model="feedData" :label-width="labelWidth">
+    <el-form ref="feed" :model="feedData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="feed" :data="feedData"/>
    </el-form>
-    <el-form ref="streamer" :model="streamerData" :label-width="labelWidth">
+    <el-form ref="streamer" :model="streamerData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="streamer" :data="streamerData"/>
    </el-form>
    <div class="submit-button-container">
@ -78,6 +78,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/JobQueue.vue
+++ b/src/views/settings/components/JobQueue.vue
@ -1,12 +1,12 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="obanQueuesData" :model="obanQueuesData" :label-width="labelWidth">
+    <el-form ref="obanQueuesData" :model="obanQueuesData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="obanQueues" :data="obanQueuesData"/>
    </el-form>
-    <el-form ref="workersData" :model="workersData" :label-width="labelWidth">
+    <el-form ref="workersData" :model="workersData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="workers" :data="workersData"/>
    </el-form>
-    <el-form ref="activityExpiration" :model="activityExpirationData" :label-width="labelWidth">
+    <el-form ref="activityExpiration" :model="activityExpirationData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="activityExpiration" :data="activityExpirationData"/>
    </el-form>
    <div class="submit-button-container">
@ -43,6 +43,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/Logger.vue
+++ b/src/views/settings/components/Logger.vue
@ -1,18 +1,18 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="loggerData" :model="loggerData" :label-width="labelWidth">
+    <el-form ref="loggerData" :model="loggerData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="logger" :data="loggerData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="consoleData" :model="consoleData" :label-width="labelWidth">
+    <el-form ref="consoleData" :model="consoleData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="console" :data="consoleData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="exsysloggerData" :model="exsysloggerData" :label-width="labelWidth">
+    <el-form ref="exsysloggerData" :model="exsysloggerData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="exsyslogger" :data="exsysloggerData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="quackData" :model="quackData" :label-width="labelWidth">
+    <el-form ref="quackData" :model="quackData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="quack" :data="quackData"/>
    </el-form>
    <div class="submit-button-container">
@ -55,6 +55,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/MRF.vue
+++ b/src/views/settings/components/MRF.vue
@ -1,40 +1,40 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="mrfSimple" :model="mrfSimpleData" :label-width="labelWidth">
+    <el-form ref="mrfSimple" :model="mrfSimpleData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="mrfSimple" :data="mrfSimpleData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="mrfRejectnonpublic" :model="mrfRejectnonpublicData" :label-width="labelWidth">
+    <el-form ref="mrfRejectnonpublic" :model="mrfRejectnonpublicData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="mrfRejectnonpublic" :data="mrfRejectnonpublicData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="mrfHellthread" :model="mrfHellthreadData" :label-width="labelWidth">
+    <el-form ref="mrfHellthread" :model="mrfHellthreadData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="mrfHellthread" :data="mrfHellthreadData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="mrfKeyword" :model="mrfKeywordData" :label-width="labelWidth">
+    <el-form ref="mrfKeyword" :model="mrfKeywordData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="mrfKeyword" :data="mrfKeywordData"/>
    </el-form>
-    <el-form ref="mrfSubchain" :model="mrfSubchainData" :label-width="labelWidth">
+    <el-form ref="mrfSubchain" :model="mrfSubchainData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="mrfSubchain" :data="mrfSubchainData"/>
    </el-form>
-    <el-form ref="mrfMention" :model="mrfMentionData" :label-width="labelWidth">
+    <el-form ref="mrfMention" :model="mrfMentionData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="mrfMention" :data="mrfMentionData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="mrfNormalizeMarkup" :model="mrfNormalizeMarkupData" :label-width="labelWidth">
+    <el-form ref="mrfNormalizeMarkup" :model="mrfNormalizeMarkupData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="mrfNormalizeMarkup" :data="mrfNormalizeMarkupData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="mrfVocabulary" :model="mrfVocabularyData" :label-width="labelWidth">
+    <el-form ref="mrfVocabulary" :model="mrfVocabularyData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="mrfVocabulary" :data="mrfVocabularyData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="mrfObjectAge" :model="mrfObjectAgeData" :label-width="labelWidth">
+    <el-form ref="mrfObjectAge" :model="mrfObjectAgeData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="mrfObjectAge" :data="mrfObjectAgeData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="modules" :model="modulesData" :label-width="labelWidth">
+    <el-form ref="modules" :model="modulesData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="modules" :data="modulesData"/>
    </el-form>
    <div class="submit-button-container">
@ -65,6 +65,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/Mailer.vue
+++ b/src/views/settings/components/Mailer.vue
@ -1,20 +1,20 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="mailer" :model="mailerData" :label-width="labelWidth">
+    <el-form ref="mailer" :model="mailerData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="mailer" :data="mailerData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="swoosh" :model="swooshData" :label-width="labelWidth">
+    <el-form ref="swoosh" :model="swooshData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="swoosh" :data="swooshData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="emailNotifications" :model="emailNotificationsData" :label-width="labelWidth">
+    <el-form ref="emailNotifications" :model="emailNotificationsData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="emailNotifications" :data="emailNotificationsData"/>
    </el-form>
-    <el-form ref="userEmail" :model="userEmailData" :label-width="labelWidth">
+    <el-form ref="userEmail" :model="userEmailData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="userEmail" :data="userEmailData"/>
    </el-form>
-    <el-form ref="newUsersDigestEmail" :model="newUsersDigestEmailData" :label-width="labelWidth">
+    <el-form ref="newUsersDigestEmail" :model="newUsersDigestEmailData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="newUsersDigestEmail" :data="newUsersDigestEmailData"/>
    </el-form>
    <div class="submit-button-container">
@ -53,6 +53,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/MediaProxy.vue
+++ b/src/views/settings/components/MediaProxy.vue
@ -1,6 +1,6 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form v-if="!loading" ref="mediaProxy" :model="mediaProxyData" :label-width="labelWidth">
+    <el-form v-if="!loading" ref="mediaProxy" :model="mediaProxyData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="mediaProxy" :data="mediaProxyData"/>
    </el-form>
    <div class="submit-button-container">
@ -31,6 +31,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/Metadata.vue
+++ b/src/views/settings/components/Metadata.vue
@ -1,10 +1,10 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="metadata" :model="metadataData" :label-width="labelWidth">
+    <el-form ref="metadata" :model="metadataData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="metadata" :data="metadataData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="richMedia" :model="richMediaData" :label-width="labelWidth">
+    <el-form ref="richMedia" :model="richMediaData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="richMedia" :data="richMediaData"/>
    </el-form>
    <div class="submit-button-container">
@ -35,6 +35,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/Other.vue
+++ b/src/views/settings/components/Other.vue
@ -1,9 +1,9 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="mimeTypes" :model="mimeTypesData" :label-width="labelWidth">
+    <el-form ref="mimeTypes" :model="mimeTypesData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="mimeTypes" :data="mimeTypesData"/>
    </el-form>
-    <el-form ref="remoteIp" :model="remoteIpData" :label-width="labelWidth">
+    <el-form ref="remoteIp" :model="remoteIpData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="remoteIp" :data="remoteIpData"/>
    </el-form>
    <div class="submit-button-container">
@ -34,6 +34,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/RateLimiters.vue
+++ b/src/views/settings/components/RateLimiters.vue
@ -1,6 +1,6 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form v-if="!loading" ref="rateLimiters" :model="rateLimitersData" :label-width="labelWidth">
+    <el-form v-if="!loading" ref="rateLimiters" :model="rateLimitersData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="rateLimiters" :data="rateLimitersData"/>
    </el-form>
    <div class="submit-button-container">
@ -37,6 +37,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/Upload.vue
+++ b/src/views/settings/components/Upload.vue
@ -1,24 +1,24 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form ref="uploadData" :model="uploadData" :label-width="labelWidth">
+    <el-form ref="uploadData" :model="uploadData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="upload" :data="uploadData"/>
    </el-form>
-    <el-form v-if="showUploadersLocal" ref="uploadersLocal" :model="uploadersLocalData" :label-width="labelWidth">
+    <el-form v-if="showUploadersLocal" ref="uploadersLocal" :model="uploadersLocalData" :label-position="labelPosition" :label-width="labelWidth">
      <el-form-item class="grouped-settings-header">
-        <span class="label-font">Pleroma.Uploaders.Local</span>
+        <span class="label-font label-with-margin">Pleroma.Uploaders.Local</span>
      </el-form-item>
      <setting :setting-group="uploadersLocal" :data="uploadersLocalData"/>
      <el-divider class="divider thick-line"/>
    </el-form>
-    <el-form v-if="showUploadersS3" ref="uploadersS3" :model="uploadersS3Data" :label-width="labelWidth">
+    <el-form v-if="showUploadersS3" ref="uploadersS3" :model="uploadersS3Data" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="uploadersS3" :data="uploadersS3Data"/>
      <el-divider class="divider thick-line"/>
    </el-form>
-    <el-form ref="uploadFilterMogrify" :model="uploadFilterMogrifyData" :label-width="labelWidth">
+    <el-form ref="uploadFilterMogrify" :model="uploadFilterMogrifyData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="uploadFilterMogrify" :data="uploadFilterMogrifyData"/>
    </el-form>
    <el-divider class="divider thick-line"/>
-    <el-form ref="uploadAnonymizeFilename" :model="uploadAnonymizeFilenameData" :label-width="labelWidth">
+    <el-form ref="uploadAnonymizeFilename" :model="uploadAnonymizeFilenameData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="uploadAnonymizeFilename" :data="uploadAnonymizeFilenameData"/>
    </el-form>
    <div class="submit-button-container">
@ -49,6 +49,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/WebPush.vue
+++ b/src/views/settings/components/WebPush.vue
@ -1,6 +1,6 @@
 <template>
  <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <el-form v-if="!loading" ref="vapidDetailsData" :model="vapidDetailsData" :label-width="labelWidth">
+    <el-form v-if="!loading" ref="vapidDetailsData" :model="vapidDetailsData" :label-position="labelPosition" :label-width="labelWidth">
      <setting :setting-group="vapidDetails" :data="vapidDetailsData"/>
    </el-form>
    <div class="submit-button-container">
@ -31,6 +31,9 @@ export default {
    isTablet() {
      return this.$store.state.app.device === 'tablet'
    },
+    labelPosition() {
+      return this.isMobile ? 'top' : 'right'
+    },
    labelWidth() {
      if (this.isMobile) {
        return '120px'
--- a/src/views/settings/components/inputComponents/SelectInputWithReducedLabels.vue
+++ b/src/views/settings/components/inputComponents/SelectInputWithReducedLabels.vue
@ -0,0 +1,120 @@
+<template>
+  <div class="input">
+    <el-select
+      v-if="renderMultipleSelect(setting.type)"
+      :value="inputValue"
+      :data-search="setting.key"
+      multiple
+      filterable
+      allow-create
+      class="input"
+      @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
+      <el-option v-for="(option, index) in options(setting.suggestions)" :key="index" :value="option.value" :label="option.label" />
+    </el-select>
+    <el-select
+      v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes('dropdown'))"
+      :value="inputValue"
+      :data-search="setting.key || setting.group"
+      clearable
+      class="input"
+      @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
+      <el-option
+        v-for="(option, index) in options(setting.suggestions)"
+        :value="option.value"
+        :label="option.label"
+        :key="index"/>
+    </el-select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SelectInputWithReducedLabels',
+  props: {
+    data: {
+      type: [Array, Object],
+      default: function() {
+        return {}
+      }
+    },
+    setting: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    settingGroup: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  computed: {
+    inputValue() {
+      if (this.setting.key === 'Pleroma.Web.Auth.Authenticator') {
+        return this.data.value
+      } else if (this.setting.key === ':rewrite_policy') {
+        return typeof this.data[this.setting.key] === 'string'
+          ? [this.data[this.setting.key]]
+          : this.data[this.setting.key]
+      } else {
+        return this.data[this.setting.key]
+      }
+    },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    }
+  },
+  methods: {
+    options(suggestions) {
+      const prefixes = {
+        ':rewrite_policy': 'Pleroma.Web.ActivityPub.MRF.',
+        'Pleroma.Web.Auth.Authenticator': 'Pleroma.Web.Auth.',
+        ':method': 'Pleroma.Captcha.',
+        ':adapter': 'Swoosh.Adapters.',
+        ':providers': 'Pleroma.Web.Metadata.Providers.',
+        ':parsers': 'Pleroma.Web.RichMedia.Parsers.',
+        ':ttl_setters': 'Pleroma.Web.RichMedia.Parser.',
+        ':scrub_policy': 'Pleroma.HTML.',
+        ':federation_publisher_modules': 'Pleroma.Web.',
+        ':uploader': 'Pleroma.Uploaders.',
+        ':filters': 'Pleroma.Upload.Filter.'
+      }
+
+      return suggestions.map(element => {
+        const label = element.split(prefixes[this.setting.key])[1]
+          ? element.split(prefixes[this.setting.key])[1]
+          : element
+        return { value: element, label }
+      })
+    },
+    renderMultipleSelect(type) {
+      return Array.isArray(type) && this.setting.key !== ':backends' && this.setting.key !== ':args' && (
+        type.includes('module') ||
+        (type.includes('list') && type.includes('string')) ||
+        (type.includes('list') && type.includes('atom')) ||
+        (type.includes('regex') && type.includes('string')) ||
+        this.setting.key === ':args'
+      )
+    },
+    rewritePolicyOptions(suggestions) {
+      return suggestions.map(element => {
+        const label = element.split('Pleroma.Web.ActivityPub.MRF.')[1]
+          ? element.split('Pleroma.Web.ActivityPub.MRF.')[1]
+          : element
+        return { value: element, label }
+      })
+    },
+    updateSetting(value, group, key, input, type) {
+      this.$store.dispatch('UpdateSettings', { group, key, input, value, type })
+      this.$store.dispatch('UpdateState', { group, key, input, value })
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@import '../../styles/main';
+@include settings
+</style>
--- a/src/views/settings/components/inputComponents/index.js
+++ b/src/views/settings/components/inputComponents/index.js
@ -8,3 +8,4 @@ export { default as ProxyUrlInput } from './ProxyUrlInput'
 export { default as PruneInput } from './PruneInput'
 export { default as RateLimitInput } from './RateLimitInput'
 export { default as RegInvitesInput } from './RegInvitesInput'
+export { default as SelectInputWithReducedLabels } from './SelectInputWithReducedLabels'
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@ -54,6 +54,9 @@
    padding-left: 10px;
    padding-right: 10px;
  }
+  .el-tabs__header {
+    z-index: 3000;
+  }
  .esshd-list {
    margin: 0;
  }
@ -324,7 +327,7 @@
    position: fixed;
    bottom: 0px;
    right: 0;
-    z-index: 10000;
+    z-index: 2000;
  }
  .switch-input {
    height: 36px;
@ -394,7 +397,7 @@
    }
    .description > p {
      line-height: 18px;
-      margin: 0 5px 7px 0;
+      margin: 0 5px 7px 15px;
      code {
        display: inline;
        line-height: 18px;
@ -429,7 +432,7 @@
      width: 100%;
      .el-form-item:first-child {
        margin: 0;
-        padding: 0 15px 10px 0;
+        padding: 0 15px 10px 15px;
      }
      .el-form-item.crontab-container:first-child {
        margin: 0;
@ -450,6 +453,9 @@
      display: flex;
      justify-content: space-between;
    }
+    .label-with-margin {
+      margin-left: 15px;
+    }
    .limit-input {
      width: 45%;
    }
@ -527,10 +533,16 @@
    padding: 0 5px 0 5px
    }
    .el-form-item__label:not(.no-top-margin) {
-      padding-left: 3px;
-      padding-right: 10px;
+      padding-bottom: 5px;
      line-height: 22px;
      margin-top: 7px;
+      width: 100%;
+      span {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+      }
    }
    .el-message {
      min-width: 80%;
@ -563,6 +575,12 @@
    .line {
      margin-bottom: 10px;
    }
+    .mascot-form-item {
+      .el-form-item__label:not(.no-top-margin) {
+        margin: 0;
+        padding: 0;
+      }
+    }
    .mascot-container {
      margin-bottom: 5px;
    }