From bb3681349007b13a43f32bbd3c66327939c4b641 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 22 Apr 2020 01:28:40 +0300
Subject: [PATCH 01/15] Align label on top on MRF tab

---
 src/views/settings/components/MRF.vue | 23 +++++++++++++----------
 src/views/settings/styles/main.scss   |  7 +++----
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/views/settings/components/MRF.vue b/src/views/settings/components/MRF.vue
index d13d5178..94d3762e 100644
--- 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'
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 7c9e3bbb..430fd0a7 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -394,7 +394,7 @@
     }
     .description > p {
       line-height: 18px;
-      margin: 0 5px 7px 0;
+      margin: 0 5px 7px 15px;
       code {
         display: inline;
         line-height: 18px;
@@ -429,7 +429,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;
@@ -527,8 +527,7 @@
     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;
     }

From a31952b8aae76b5f5e760cea6eb0f11d31b6b583 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 22 Apr 2020 01:54:19 +0300
Subject: [PATCH 02/15] Change label position for ActivityPub, Auth,
 AutoLinker, Captcha and Esshd tabs

---
 src/views/settings/components/ActivityPub.vue    |  7 +++++--
 src/views/settings/components/Authentication.vue | 11 +++++++----
 src/views/settings/components/AutoLinker.vue     |  5 ++++-
 src/views/settings/components/Captcha.vue        |  7 +++++--
 src/views/settings/components/Esshd.vue          |  5 ++++-
 5 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/views/settings/components/ActivityPub.vue b/src/views/settings/components/ActivityPub.vue
index 8cd3e459..4e5ab1b8 100644
--- 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'
diff --git a/src/views/settings/components/Authentication.vue b/src/views/settings/components/Authentication.vue
index 5d7b3689..69e5f143 100644
--- 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'
diff --git a/src/views/settings/components/AutoLinker.vue b/src/views/settings/components/AutoLinker.vue
index a7f9b3ae..56f5e586 100644
--- 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'
diff --git a/src/views/settings/components/Captcha.vue b/src/views/settings/components/Captcha.vue
index a5d44431..5e91074a 100644
--- 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'
diff --git a/src/views/settings/components/Esshd.vue b/src/views/settings/components/Esshd.vue
index b2d1d2b5..6404515e 100644
--- 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'

From 73a87b440afbe269fe543d4314f53b1c15819118 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 22 Apr 2020 20:50:15 +0300
Subject: [PATCH 03/15] Update label position on Frontend, Gopher, Http,
 Instance, JobQueue, Logger and Mailer tabs

---
 src/views/settings/components/Frontend.vue | 21 ++++++++++++---------
 src/views/settings/components/Gopher.vue   |  5 ++++-
 src/views/settings/components/Http.vue     | 15 +++++++++------
 src/views/settings/components/Instance.vue | 19 +++++++++++--------
 src/views/settings/components/JobQueue.vue |  9 ++++++---
 src/views/settings/components/Logger.vue   | 11 +++++++----
 src/views/settings/components/Mailer.vue   | 13 ++++++++-----
 src/views/settings/styles/main.scss        |  9 +++++++++
 8 files changed, 66 insertions(+), 36 deletions(-)

diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index 62bae330..2af44656 100644
--- 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'
diff --git a/src/views/settings/components/Gopher.vue b/src/views/settings/components/Gopher.vue
index fa2a33c0..26b64997 100644
--- 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'
diff --git a/src/views/settings/components/Http.vue b/src/views/settings/components/Http.vue
index 670613d9..39042b61 100644
--- 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'
diff --git a/src/views/settings/components/Instance.vue b/src/views/settings/components/Instance.vue
index 6696c4a6..02abe655 100644
--- 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'
diff --git a/src/views/settings/components/JobQueue.vue b/src/views/settings/components/JobQueue.vue
index 414640d6..f4ee9222 100644
--- 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'
diff --git a/src/views/settings/components/Logger.vue b/src/views/settings/components/Logger.vue
index 6e05d6a3..b9fb891e 100644
--- 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'
diff --git a/src/views/settings/components/Mailer.vue b/src/views/settings/components/Mailer.vue
index 9767fc23..0a438693 100644
--- 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'
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 430fd0a7..cad3ad83 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -450,6 +450,9 @@
       display: flex;
       justify-content: space-between;
     }
+    .label-with-margin {
+      margin-left: 15px;
+    }
     .limit-input {
       width: 45%;
     }
@@ -562,6 +565,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;
     }

From abb375d2ac2280e7dd4240d87ba04789071c1ba9 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 23 Apr 2020 02:57:40 +0300
Subject: [PATCH 04/15] Update label styles on MediaProxy tab

---
 src/views/settings/components/Inputs.vue     | 2 +-
 src/views/settings/components/MediaProxy.vue | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 497fb5bb..1cd99f28 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -25,7 +25,7 @@
           :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">
diff --git a/src/views/settings/components/MediaProxy.vue b/src/views/settings/components/MediaProxy.vue
index d5105eef..720180b2 100644
--- 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'

From 4752ce96a39e460400350e9c55458ac6a5ef69f2 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 23 Apr 2020 03:20:29 +0300
Subject: [PATCH 05/15] Update label position for Metadata, Other,
 RateLimiters, Upload and WebPush tabs

---
 src/views/settings/components/Metadata.vue     |  7 +++++--
 src/views/settings/components/Other.vue        |  7 +++++--
 src/views/settings/components/RateLimiters.vue |  5 ++++-
 src/views/settings/components/Upload.vue       | 15 +++++++++------
 src/views/settings/components/WebPush.vue      |  5 ++++-
 5 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/views/settings/components/Metadata.vue b/src/views/settings/components/Metadata.vue
index a72d7add..b4aef7c8 100644
--- 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'
diff --git a/src/views/settings/components/Other.vue b/src/views/settings/components/Other.vue
index 129b9e61..2eee5468 100644
--- 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'
diff --git a/src/views/settings/components/RateLimiters.vue b/src/views/settings/components/RateLimiters.vue
index 6237b16d..1b0283c9 100644
--- 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'
diff --git a/src/views/settings/components/Upload.vue b/src/views/settings/components/Upload.vue
index 05950cff..b557fb5a 100644
--- 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'
diff --git a/src/views/settings/components/WebPush.vue b/src/views/settings/components/WebPush.vue
index 2fd7446d..9c76a608 100644
--- 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'

From 02c3059a97c03788d3b24bb8e0457f43f5eb893a Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 23 Apr 2020 20:57:31 +0300
Subject: [PATCH 06/15] Change the way rewrite policy input is rendered

---
 src/views/settings/components/Inputs.vue | 43 ++++++++++++++++++------
 1 file changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 1cd99f28..56ddf1aa 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -66,17 +66,30 @@
             :value="option"
             :key="index"/>
         </el-select>
-        <el-select
-          v-if="renderMultipleSelect(setting.type)"
-          :value="setting.key === ':rewrite_policy' ? rewritePolicyValue : inputValue"
-          :data-search="setting.key || setting.group"
-          multiple
-          filterable
-          allow-create
-          class="input"
-          @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
-          <el-option v-for="(option, index) in setting.suggestions" :key="index" :value="option"/>
-        </el-select>
+        <div v-if="renderMultipleSelect(setting.type)" class="input">
+          <el-select
+            v-if="setting.key === ':rewrite_policy'"
+            :value="rewritePolicyValue"
+            :data-search="setting.key || setting.group"
+            multiple
+            filterable
+            allow-create
+            class="input"
+            @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
+            <el-option v-for="(option, index) in rewritePolicyOptions(setting.suggestions)" :key="index" :value="option.value" :label="option.label" />
+          </el-select>
+          <el-select
+            v-else
+            :value="inputValue"
+            :data-search="setting.key || setting.group"
+            multiple
+            filterable
+            allow-create
+            class="input"
+            @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
+            <el-option v-for="(option, index) in setting.suggestions" :key="index" :value="option"/>
+          </el-select>
+        </div>
         <el-input
           v-if="setting.key === ':ip'"
           :value="inputValue"
@@ -303,6 +316,14 @@ export default {
         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 }
+      })
+    },
     update(value, group, key, parents, input, type, nested) {
       nested
         ? this.processNestedData(value, group, key, parents)

From 3dd498c2e592f14707dfe7ccc7e5acb3b33973a7 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 23 Apr 2020 22:26:07 +0300
Subject: [PATCH 07/15] Move button that removes settings on mobile devices

---
 src/views/settings/components/Inputs.vue | 5 ++---
 src/views/settings/styles/main.scss      | 7 +++++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 56ddf1aa..03da047f 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -28,7 +28,7 @@
     <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>
@@ -73,7 +73,6 @@
             :data-search="setting.key || setting.group"
             multiple
             filterable
-            allow-create
             class="input"
             @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
             <el-option v-for="(option, index) in rewritePolicyOptions(setting.suggestions)" :key="index" :value="option.value" :label="option.label" />
@@ -118,7 +117,7 @@
         <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"/>
         <!-------------------->
-        <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>
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index cad3ad83..dea944ab 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -533,6 +533,13 @@
       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%;

From 09f219c2017eefdc0ace322d677146ce4144e7f6 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 24 Apr 2020 17:20:56 +0300
Subject: [PATCH 08/15] Extract Rewrite Policy Input into separate component

---
 src/views/settings/components/Inputs.vue      | 52 ++++---------
 .../inputComponents/RewritePolicyInput.vue    | 78 +++++++++++++++++++
 .../components/inputComponents/index.js       |  1 +
 3 files changed, 95 insertions(+), 36 deletions(-)
 create mode 100644 src/views/settings/components/inputComponents/RewritePolicyInput.vue

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 03da047f..e84e5a6f 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -66,29 +66,17 @@
             :value="option"
             :key="index"/>
         </el-select>
-        <div v-if="renderMultipleSelect(setting.type)" class="input">
-          <el-select
-            v-if="setting.key === ':rewrite_policy'"
-            :value="rewritePolicyValue"
-            :data-search="setting.key || setting.group"
-            multiple
-            filterable
-            class="input"
-            @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
-            <el-option v-for="(option, index) in rewritePolicyOptions(setting.suggestions)" :key="index" :value="option.value" :label="option.label" />
-          </el-select>
-          <el-select
-            v-else
-            :value="inputValue"
-            :data-search="setting.key || setting.group"
-            multiple
-            filterable
-            allow-create
-            class="input"
-            @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
-            <el-option v-for="(option, index) in setting.suggestions" :key="index" :value="option"/>
-          </el-select>
-        </div>
+        <el-select
+          v-if="!setting.key === ':rewrite_policy' && renderMultipleSelect(setting.type)"
+          :value="inputValue"
+          :data-search="setting.key || setting.group"
+          multiple
+          filterable
+          allow-create
+          class="input"
+          @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
+          <el-option v-for="(option, index) in setting.suggestions" :key="index" :value="option"/>
+        </el-select>
         <el-input
           v-if="setting.key === ':ip'"
           :value="inputValue"
@@ -116,6 +104,7 @@
         <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"/>
+        <rewrite-policy-input v-if="setting.key === ':rewrite_policy'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
         <!-------------------->
         <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"/>
@@ -141,7 +130,8 @@ import {
   ProxyUrlInput,
   PruneInput,
   RateLimitInput,
-  RegInvitesInput } from './inputComponents'
+  RegInvitesInput,
+  RewritePolicyInput } from './inputComponents'
 import { processNested } from '@/store/modules/normalizers'
 import _ from 'lodash'
 import marked from 'marked'
@@ -158,7 +148,8 @@ export default {
     ProxyUrlInput,
     PruneInput,
     RateLimitInput,
-    RegInvitesInput
+    RegInvitesInput,
+    RewritePolicyInput
   },
   props: {
     customLabelWidth: {
@@ -262,9 +253,6 @@ 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]
-    },
     settings() {
       return this.$store.state.settings.settings
     },
@@ -315,14 +303,6 @@ export default {
         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 }
-      })
-    },
     update(value, group, key, parents, input, type, nested) {
       nested
         ? this.processNestedData(value, group, key, parents)
diff --git a/src/views/settings/components/inputComponents/RewritePolicyInput.vue b/src/views/settings/components/inputComponents/RewritePolicyInput.vue
new file mode 100644
index 00000000..587a4faa
--- /dev/null
+++ b/src/views/settings/components/inputComponents/RewritePolicyInput.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="input">
+    <el-select
+      v-if="isMobile"
+      :value="rewritePolicyValue"
+      :data-search="setting.key"
+      multiple
+      filterable
+      class="input"
+      @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
+      <el-option v-for="(option, index) in rewritePolicyOptions(setting.suggestions)" :key="index" :value="option.value" :label="option.label" />
+    </el-select>
+    <el-select
+      v-else
+      :value="rewritePolicyValue"
+      :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 setting.suggestions" :key="index" :value="option"/>
+    </el-select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RewritePolicyInput',
+  props: {
+    data: {
+      type: [String, Array],
+      default: function() {
+        return {}
+      }
+    },
+    setting: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    settingGroup: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    rewritePolicyValue() {
+      return typeof this.data === 'string' ? [this.data] : this.data
+    }
+  },
+  methods: {
+    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>
diff --git a/src/views/settings/components/inputComponents/index.js b/src/views/settings/components/inputComponents/index.js
index 3b6f7aa1..2908e17a 100644
--- 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 RewritePolicyInput } from './RewritePolicyInput'

From e488e3f8524beae3977f972fba9e4f255ea26079 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 25 Apr 2020 22:07:48 +0300
Subject: [PATCH 09/15] Reduce options and labels for Pleroma authenticator
 input

---
 src/views/settings/components/Inputs.vue      |  9 +++--
 .../inputComponents/RewritePolicyInput.vue    | 39 ++++++++++++++-----
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index e84e5a6f..a5181ed1 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -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="setting.key !== 'Pleroma.Web.Auth.Authenticator' && (setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes('dropdown')))"
           :value="inputValue === false ? 'false' : inputValue"
           :data-search="setting.key || setting.group"
           clearable
@@ -67,7 +67,7 @@
             :key="index"/>
         </el-select>
         <el-select
-          v-if="!setting.key === ':rewrite_policy' && renderMultipleSelect(setting.type)"
+          v-if="renderMultipleSelect(setting.type) && setting.key !== ':rewrite_policy'"
           :value="inputValue"
           :data-search="setting.key || setting.group"
           multiple
@@ -104,7 +104,7 @@
         <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"/>
-        <rewrite-policy-input v-if="setting.key === ':rewrite_policy'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
+        <rewrite-policy-input v-if="reducedSelects" :data="data" :setting-group="settingGroup" :setting="setting"/>
         <!-------------------->
         <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"/>
@@ -253,6 +253,9 @@ export default {
     keywordData() {
       return Array.isArray(this.data) ? this.data : []
     },
+    reducedSelects() {
+      return [':rewrite_policy', 'Pleroma.Web.Auth.Authenticator'].includes(this.setting.key)
+    },
     settings() {
       return this.$store.state.settings.settings
     },
diff --git a/src/views/settings/components/inputComponents/RewritePolicyInput.vue b/src/views/settings/components/inputComponents/RewritePolicyInput.vue
index 587a4faa..d7af0a67 100644
--- a/src/views/settings/components/inputComponents/RewritePolicyInput.vue
+++ b/src/views/settings/components/inputComponents/RewritePolicyInput.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="input">
     <el-select
-      v-if="isMobile"
+      v-if="renderMultipleSelect(setting.type)"
       :value="rewritePolicyValue"
       :data-search="setting.key"
       multiple
@@ -11,15 +11,17 @@
       <el-option v-for="(option, index) in rewritePolicyOptions(setting.suggestions)" :key="index" :value="option.value" :label="option.label" />
     </el-select>
     <el-select
-      v-else
-      :value="rewritePolicyValue"
-      :data-search="setting.key"
-      multiple
-      filterable
-      allow-create
+      v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes('dropdown'))"
+      :value="data.value"
+      :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 setting.suggestions" :key="index" :value="option"/>
+      <el-option
+        v-for="(option, index) in authenticatorOptions(setting.suggestions)"
+        :value="option.value"
+        :label="option.label"
+        :key="index"/>
     </el-select>
   </div>
 </template>
@@ -29,7 +31,7 @@ export default {
   name: 'RewritePolicyInput',
   props: {
     data: {
-      type: [String, Array],
+      type: [Array, Object],
       default: function() {
         return {}
       }
@@ -52,10 +54,27 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     rewritePolicyValue() {
-      return typeof this.data === 'string' ? [this.data] : this.data
+      return typeof this.data[this.setting.key] === 'string' ? [this.data[this.setting.key]] : this.data[this.setting.key]
     }
   },
   methods: {
+    authenticatorOptions(suggestions) {
+      return suggestions.map(element => {
+        const label = element.split('Pleroma.Web.Auth.')[1]
+          ? element.split('Pleroma.Web.Auth.')[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]

From 8937cf87d1eb89b975305d39cd6bd24e9c175a0e Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 25 Apr 2020 22:38:30 +0300
Subject: [PATCH 10/15] Reduce length of suggestions in Captcha method input

---
 src/views/settings/components/Inputs.vue      |  6 +--
 .../inputComponents/RewritePolicyInput.vue    | 44 ++++++++++++++-----
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index a5181ed1..5b168b80 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -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.key !== 'Pleroma.Web.Auth.Authenticator' && (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,7 +67,7 @@
             :key="index"/>
         </el-select>
         <el-select
-          v-if="renderMultipleSelect(setting.type) && setting.key !== ':rewrite_policy'"
+          v-if="renderMultipleSelect(setting.type) && !reducedSelects"
           :value="inputValue"
           :data-search="setting.key || setting.group"
           multiple
@@ -254,7 +254,7 @@ export default {
       return Array.isArray(this.data) ? this.data : []
     },
     reducedSelects() {
-      return [':rewrite_policy', 'Pleroma.Web.Auth.Authenticator'].includes(this.setting.key)
+      return [':method', ':rewrite_policy', 'Pleroma.Web.Auth.Authenticator'].includes(this.setting.key)
     },
     settings() {
       return this.$store.state.settings.settings
diff --git a/src/views/settings/components/inputComponents/RewritePolicyInput.vue b/src/views/settings/components/inputComponents/RewritePolicyInput.vue
index d7af0a67..0b3aa1cd 100644
--- a/src/views/settings/components/inputComponents/RewritePolicyInput.vue
+++ b/src/views/settings/components/inputComponents/RewritePolicyInput.vue
@@ -2,23 +2,23 @@
   <div class="input">
     <el-select
       v-if="renderMultipleSelect(setting.type)"
-      :value="rewritePolicyValue"
+      :value="inputValue"
       :data-search="setting.key"
       multiple
       filterable
       class="input"
       @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
-      <el-option v-for="(option, index) in rewritePolicyOptions(setting.suggestions)" :key="index" :value="option.value" :label="option.label" />
+      <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="data.value"
+      :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 authenticatorOptions(setting.suggestions)"
+        v-for="(option, index) in options(setting.suggestions)"
         :value="option.value"
         :label="option.label"
         :key="index"/>
@@ -50,18 +50,42 @@ export default {
     }
   },
   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'
-    },
-    rewritePolicyValue() {
-      return typeof this.data[this.setting.key] === 'string' ? [this.data[this.setting.key]] : this.data[this.setting.key]
     }
   },
   methods: {
-    authenticatorOptions(suggestions) {
+    options(suggestions) {
+      let prefix
+
+      switch (this.setting.key) {
+        case ':rewrite_policy':
+          prefix = 'Pleroma.Web.ActivityPub.MRF.'
+          break
+        case 'Pleroma.Web.Auth.Authenticator':
+          prefix = 'Pleroma.Web.Auth.'
+          break
+        case ':method':
+          prefix = 'Pleroma.Captcha.'
+          break
+        default:
+          prefix = ''
+      }
+
       return suggestions.map(element => {
-        const label = element.split('Pleroma.Web.Auth.')[1]
-          ? element.split('Pleroma.Web.Auth.')[1]
+        const label = element.split(prefix)[1]
+          ? element.split(prefix)[1]
           : element
         return { value: element, label }
       })

From f822fb4ba6251a2c8ffc9169ace7f0ef5ca3c1b4 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 26 Apr 2020 21:03:05 +0300
Subject: [PATCH 11/15] Reduce labels for Mailer adapter, Metadata providers,
 Rich Media parsers and TTL setters

---
 src/views/settings/components/Inputs.vue             |  3 ++-
 .../inputComponents/RewritePolicyInput.vue           | 12 ++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 5b168b80..3a24e23d 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -254,7 +254,8 @@ export default {
       return Array.isArray(this.data) ? this.data : []
     },
     reducedSelects() {
-      return [':method', ':rewrite_policy', 'Pleroma.Web.Auth.Authenticator'].includes(this.setting.key)
+      return [':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
diff --git a/src/views/settings/components/inputComponents/RewritePolicyInput.vue b/src/views/settings/components/inputComponents/RewritePolicyInput.vue
index 0b3aa1cd..e245a6da 100644
--- a/src/views/settings/components/inputComponents/RewritePolicyInput.vue
+++ b/src/views/settings/components/inputComponents/RewritePolicyInput.vue
@@ -79,6 +79,18 @@ export default {
         case ':method':
           prefix = 'Pleroma.Captcha.'
           break
+        case ':adapter':
+          prefix = 'Swoosh.Adapters.'
+          break
+        case ':providers':
+          prefix = 'Pleroma.Web.Metadata.Providers.'
+          break
+        case ':parsers':
+          prefix = 'Pleroma.Web.RichMedia.Parsers.'
+          break
+        case ':ttl_setters':
+          prefix = 'Pleroma.Web.RichMedia.Parser.'
+          break
         default:
           prefix = ''
       }

From 4160a89c66ce5c0a30693cfcde7f67e4dc627243 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 27 Apr 2020 01:11:50 +0300
Subject: [PATCH 12/15] Reduce labels for Scrub policy, Uploader, Filters and
 Fed publisher modules

---
 src/views/settings/components/Inputs.vue            | 13 ++++++++++++-
 .../inputComponents/RewritePolicyInput.vue          | 12 ++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 3a24e23d..64aebb54 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -254,7 +254,18 @@ export default {
       return Array.isArray(this.data) ? this.data : []
     },
     reducedSelects() {
-      return [':ttl_setters', ':parsers', ':providers', ':method', ':rewrite_policy', 'Pleroma.Web.Auth.Authenticator'].includes(this.setting.key) ||
+      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() {
diff --git a/src/views/settings/components/inputComponents/RewritePolicyInput.vue b/src/views/settings/components/inputComponents/RewritePolicyInput.vue
index e245a6da..0aa49a96 100644
--- a/src/views/settings/components/inputComponents/RewritePolicyInput.vue
+++ b/src/views/settings/components/inputComponents/RewritePolicyInput.vue
@@ -91,6 +91,18 @@ export default {
         case ':ttl_setters':
           prefix = 'Pleroma.Web.RichMedia.Parser.'
           break
+        case ':scrub_policy':
+          prefix = 'Pleroma.HTML.'
+          break
+        case ':federation_publisher_modules':
+          prefix = 'Pleroma.Web.'
+          break
+        case ':uploader':
+          prefix = 'Pleroma.Uploaders.'
+          break
+        case ':filters':
+          prefix = 'Pleroma.Upload.Filter.'
+          break
         default:
           prefix = ''
       }

From c94810994f2decc7745538483ca8e0147acbac85 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 27 Apr 2020 02:34:40 +0300
Subject: [PATCH 13/15] Add allow-create, refactor getting prefixes and rename
 custom component

---
 src/views/settings/components/Inputs.vue      |  8 +--
 ...t.vue => SelectInputWithReducedLabels.vue} | 57 ++++++-------------
 .../components/inputComponents/index.js       |  2 +-
 3 files changed, 21 insertions(+), 46 deletions(-)
 rename src/views/settings/components/inputComponents/{RewritePolicyInput.vue => SelectInputWithReducedLabels.vue} (71%)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 64aebb54..744276dc 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -67,7 +67,7 @@
             :key="index"/>
         </el-select>
         <el-select
-          v-if="renderMultipleSelect(setting.type) && !reducedSelects"
+          v-if="!reducedSelects && renderMultipleSelect(setting.type)"
           :value="inputValue"
           :data-search="setting.key || setting.group"
           multiple
@@ -104,7 +104,7 @@
         <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"/>
-        <rewrite-policy-input v-if="reducedSelects" :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 && 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"/>
@@ -131,7 +131,7 @@ import {
   PruneInput,
   RateLimitInput,
   RegInvitesInput,
-  RewritePolicyInput } from './inputComponents'
+  SelectInputWithReducedLabels } from './inputComponents'
 import { processNested } from '@/store/modules/normalizers'
 import _ from 'lodash'
 import marked from 'marked'
@@ -149,7 +149,7 @@ export default {
     PruneInput,
     RateLimitInput,
     RegInvitesInput,
-    RewritePolicyInput
+    SelectInputWithReducedLabels
   },
   props: {
     customLabelWidth: {
diff --git a/src/views/settings/components/inputComponents/RewritePolicyInput.vue b/src/views/settings/components/inputComponents/SelectInputWithReducedLabels.vue
similarity index 71%
rename from src/views/settings/components/inputComponents/RewritePolicyInput.vue
rename to src/views/settings/components/inputComponents/SelectInputWithReducedLabels.vue
index 0aa49a96..622eb896 100644
--- a/src/views/settings/components/inputComponents/RewritePolicyInput.vue
+++ b/src/views/settings/components/inputComponents/SelectInputWithReducedLabels.vue
@@ -6,6 +6,7 @@
       :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" />
@@ -28,7 +29,7 @@
 
 <script>
 export default {
-  name: 'RewritePolicyInput',
+  name: 'SelectInputWithReducedLabels',
   props: {
     data: {
       type: [Array, Object],
@@ -67,49 +68,23 @@ export default {
   },
   methods: {
     options(suggestions) {
-      let prefix
-
-      switch (this.setting.key) {
-        case ':rewrite_policy':
-          prefix = 'Pleroma.Web.ActivityPub.MRF.'
-          break
-        case 'Pleroma.Web.Auth.Authenticator':
-          prefix = 'Pleroma.Web.Auth.'
-          break
-        case ':method':
-          prefix = 'Pleroma.Captcha.'
-          break
-        case ':adapter':
-          prefix = 'Swoosh.Adapters.'
-          break
-        case ':providers':
-          prefix = 'Pleroma.Web.Metadata.Providers.'
-          break
-        case ':parsers':
-          prefix = 'Pleroma.Web.RichMedia.Parsers.'
-          break
-        case ':ttl_setters':
-          prefix = 'Pleroma.Web.RichMedia.Parser.'
-          break
-        case ':scrub_policy':
-          prefix = 'Pleroma.HTML.'
-          break
-        case ':federation_publisher_modules':
-          prefix = 'Pleroma.Web.'
-          break
-        case ':uploader':
-          prefix = 'Pleroma.Uploaders.'
-          break
-        case ':filters':
-          prefix = 'Pleroma.Upload.Filter.'
-          break
-        default:
-          prefix = ''
+      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(prefix)[1]
-          ? element.split(prefix)[1]
+        const label = element.split(prefixes[this.setting.key])[1]
+          ? element.split(prefixes[this.setting.key])[1]
           : element
         return { value: element, label }
       })
diff --git a/src/views/settings/components/inputComponents/index.js b/src/views/settings/components/inputComponents/index.js
index 2908e17a..13c92c3f 100644
--- a/src/views/settings/components/inputComponents/index.js
+++ b/src/views/settings/components/inputComponents/index.js
@@ -8,4 +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 RewritePolicyInput } from './RewritePolicyInput'
+export { default as SelectInputWithReducedLabels } from './SelectInputWithReducedLabels'

From 56fa5c1460b17cdf80364ecf1ec6a508a7d205ab Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 27 Apr 2020 23:09:11 +0300
Subject: [PATCH 14/15] Fix the overlap of fixed buttons and settings menu

---
 src/views/settings/styles/main.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index dea944ab..fde17499 100644
--- 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;

From aea87c46c8f6963148920e3669c3f2ceaaaeb737 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 28 Apr 2020 00:31:16 +0300
Subject: [PATCH 15/15] Update changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d5e5b985..babde03d 100644
--- 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