From 3a8132da7a2764e84e8464ecde1d934a9ebce1c2 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 6 Feb 2020 21:01:54 +0300
Subject: [PATCH] Change styles for settting inputs for mobile ui

---
 src/views/emojiPacks/index.vue                |   2 +-
 src/views/settings/components/ActivityPub.vue |   2 +-
 .../settings/components/Authentication.vue    |   2 +-
 src/views/settings/components/AutoLinker.vue  |   2 +-
 src/views/settings/components/Captcha.vue     |   2 +-
 src/views/settings/components/Esshd.vue       |   2 +-
 src/views/settings/components/Frontend.vue    |   2 +-
 src/views/settings/components/Gopher.vue      |   2 +-
 src/views/settings/components/Http.vue        |   2 +-
 src/views/settings/components/Inputs.vue      | 178 +++++++++---------
 src/views/settings/components/Instance.vue    |   2 +-
 src/views/settings/components/JobQueue.vue    |   2 +-
 src/views/settings/components/Logger.vue      |   2 +-
 src/views/settings/components/MRF.vue         |   2 +-
 src/views/settings/components/Mailer.vue      |   2 +-
 src/views/settings/components/MediaProxy.vue  |   2 +-
 src/views/settings/components/Metadata.vue    |   2 +-
 src/views/settings/components/Other.vue       |   2 +-
 .../settings/components/RateLimiters.vue      |   2 +-
 src/views/settings/components/Upload.vue      |   2 +-
 src/views/settings/components/WebPush.vue     |   2 +-
 src/views/settings/index.vue                  |  58 +++---
 src/views/settings/styles/main.scss           |  27 +--
 23 files changed, 160 insertions(+), 143 deletions(-)

diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 40c40d3e..48c7a0e3 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -72,7 +72,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '240px'
+      return this.isMobile ? '120px' : '240px'
     },
     localPacks() {
       return this.$store.state.emojiPacks.localPacks
diff --git a/src/views/settings/components/ActivityPub.vue b/src/views/settings/components/ActivityPub.vue
index 56a57b9a..d4eba8c1 100644
--- a/src/views/settings/components/ActivityPub.vue
+++ b/src/views/settings/components/ActivityPub.vue
@@ -36,7 +36,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.$store.state.settings.loading
diff --git a/src/views/settings/components/Authentication.vue b/src/views/settings/components/Authentication.vue
index fa517f35..e83db32a 100644
--- a/src/views/settings/components/Authentication.vue
+++ b/src/views/settings/components/Authentication.vue
@@ -44,7 +44,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     ldap() {
       return this.settings.description.find(setting => setting.key === ':ldap')
diff --git a/src/views/settings/components/AutoLinker.vue b/src/views/settings/components/AutoLinker.vue
index 18ebabc3..b5d3148e 100644
--- a/src/views/settings/components/AutoLinker.vue
+++ b/src/views/settings/components/AutoLinker.vue
@@ -32,7 +32,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Captcha.vue b/src/views/settings/components/Captcha.vue
index cc150337..f677f641 100644
--- a/src/views/settings/components/Captcha.vue
+++ b/src/views/settings/components/Captcha.vue
@@ -42,7 +42,7 @@ export default {
       return _.get(this.settings.settings, [':pleroma', 'Pleroma.Captcha.Kocaptcha']) || {}
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Esshd.vue b/src/views/settings/components/Esshd.vue
index 38b0865e..ba58faff 100644
--- a/src/views/settings/components/Esshd.vue
+++ b/src/views/settings/components/Esshd.vue
@@ -32,7 +32,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index 3931a2c8..9696bb4f 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@@ -74,7 +74,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Gopher.vue b/src/views/settings/components/Gopher.vue
index 04aec565..952662c0 100644
--- a/src/views/settings/components/Gopher.vue
+++ b/src/views/settings/components/Gopher.vue
@@ -32,7 +32,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Http.vue b/src/views/settings/components/Http.vue
index afbf79c6..cd450076 100644
--- a/src/views/settings/components/Http.vue
+++ b/src/views/settings/components/Http.vue
@@ -66,7 +66,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 1f5a79c6..ae3ebb8c 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -1,88 +1,92 @@
 <template>
-  <el-form-item :label-width="customLabelWidth" :class="labelClass">
-    <span slot="label">
-      {{ setting.label }}
-      <el-tooltip v-if="canBeDeleted" :content="$t('settings.removeFromDB')" placement="bottom-end">
-        <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting"/>
-      </el-tooltip>
-    </span>
-    <el-input
-      v-if="setting.type === 'string' || (setting.type.includes('string') && setting.type.includes('atom'))"
-      :value="inputValue"
-      :placeholder="setting.suggestions ? setting.suggestions[0] : null"
-      @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
-    <el-switch
-      v-if="setting.type === 'boolean'"
-      :value="inputValue"
-      @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
-    <el-input-number
-      v-if="setting.type === 'integer'"
-      :value="inputValue === null ? 0 : inputValue"
-      :placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
-      :min="0"
-      size="large"
-      class="top-margin"
-      @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(false))"
-      :value="inputValue"
-      clearable
-      @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
-      <el-option
-        v-for="(option, index) in setting.suggestions"
-        :value="option"
-        :key="index"/>
-    </el-select>
-    <el-select
-      v-if="renderMultipleSelect(setting.type)"
-      :value="setting.key === ':rewrite_policy' ? rewritePolicyValue : inputValue"
-      multiple
-      filterable
-      allow-create
-      @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"
-      placeholder="xxx.xxx.xxx.xx"
-      @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
-    <el-input
-      v-if="setting.type === 'atom'"
-      :value="inputValue"
-      :placeholder="setting.suggestions[0] ? setting.suggestions[0].substr(1) : ''"
-      @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
-      <template slot="prepend">:</template>
-    </el-input>
-    <div v-if="setting.type === 'keyword'">
-      <div v-for="subSetting in setting.children" :key="subSetting.key">
-        <inputs
-          :setting-group="settingGroup"
-          :setting-parent="[...settingParent, subSetting]"
-          :setting="subSetting"
-          :data="data[setting.key]"
-          :custom-label-width="'140px'"
-          :label-class="'center-label'"
-          :input-class="'keyword-inner-input'"
-          :nested="true"/>
+  <div class="input-container">
+    <el-form-item :label-width="customLabelWidth" :class="labelClass">
+      <span slot="label">
+        {{ setting.label }}
+        <el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
+          <el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting"/>
+        </el-tooltip>
+      </span>
+      <el-input
+        v-if="setting.type === 'string' || (setting.type.includes('string') && setting.type.includes('atom'))"
+        :value="inputValue"
+        :placeholder="setting.suggestions ? setting.suggestions[0] : null"
+        @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
+      <el-switch
+        v-if="setting.type === 'boolean'"
+        :value="inputValue"
+        @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
+      <el-input-number
+        v-if="setting.type === 'integer'"
+        :value="inputValue === null ? 0 : inputValue"
+        :placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
+        :min="0"
+        size="large"
+        @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(false))"
+        :value="inputValue"
+        clearable
+        @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
+        <el-option
+          v-for="(option, index) in setting.suggestions"
+          :value="option"
+          :key="index"/>
+      </el-select>
+      <el-select
+        v-if="renderMultipleSelect(setting.type)"
+        :value="setting.key === ':rewrite_policy' ? rewritePolicyValue : inputValue"
+        multiple
+        filterable
+        allow-create
+        @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"
+        placeholder="xxx.xxx.xxx.xx"
+        @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
+      <el-input
+        v-if="setting.type === 'atom'"
+        :value="inputValue"
+        :placeholder="setting.suggestions[0] ? setting.suggestions[0].substr(1) : ''"
+        @input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
+        <template slot="prepend">:</template>
+      </el-input>
+      <div v-if="setting.type === 'keyword'">
+        <div v-for="subSetting in setting.children" :key="subSetting.key">
+          <inputs
+            :setting-group="settingGroup"
+            :setting-parent="[...settingParent, subSetting]"
+            :setting="subSetting"
+            :data="data[setting.key]"
+            :custom-label-width="'140px'"
+            :label-class="'center-label'"
+            :input-class="'keyword-inner-input'"
+            :nested="true"/>
+        </div>
       </div>
-    </div>
-    <!-- special inputs -->
-    <auto-linker-input v-if="settingGroup.group === ':auto_linker'" :data="data" :setting-group="settingGroup" :setting="setting"/>
-    <mascots-input v-if="setting.key === ':mascots'" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
-    <editable-keyword-input v-if="editableKeyword(setting.key, setting.type)" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
-    <icons-input v-if="setting.key === ':icons'" :data="iconsData" :setting-group="settingGroup" :setting="setting"/>
-    <proxy-url-input v-if="setting.key === ':proxy_url'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting" :parents="settingParent"/>
-    <multiple-select v-if="setting.key === ':backends' || setting.key === ':args'" :data="data" :setting-group="settingGroup" :setting="setting"/>
-    <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"/>
-    <!-------------------->
-    <span
-      v-if="setting.description && setting.type !== 'keyword'"
-      :class="inputClass"
-      class="expl"
-      v-html="getFormattedDescription(setting.description)"/>
-  </el-form-item>
+      <!-- special inputs -->
+      <auto-linker-input v-if="settingGroup.group === ':auto_linker'" :data="data" :setting-group="settingGroup" :setting="setting"/>
+      <mascots-input v-if="setting.key === ':mascots'" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
+      <editable-keyword-input v-if="editableKeyword(setting.key, setting.type)" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
+      <icons-input v-if="setting.key === ':icons'" :data="iconsData" :setting-group="settingGroup" :setting="setting"/>
+      <proxy-url-input v-if="setting.key === ':proxy_url'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting" :parents="settingParent"/>
+      <multiple-select v-if="setting.key === ':backends' || setting.key === ':args'" :data="data" :setting-group="settingGroup" :setting="setting"/>
+      <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"/>
+      <!-------------------->
+      <div
+        v-if="setting.description && setting.type !== 'keyword'"
+        :class="inputClass"
+        class="expl"
+        v-html="getFormattedDescription(setting.description)"/>
+    </el-form-item>
+    <el-tooltip v-if="isMobile" :content="$t('settings.removeFromDB')" placement="bottom-end">
+      <el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting"/>
+    </el-tooltip>
+  </div>
 </template>
 
 <script>
@@ -185,8 +189,14 @@ export default {
         return this.data[this.setting.key]
       }
     },
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     keywordData() {
       return Array.isArray(this.data) ? this.data : []
diff --git a/src/views/settings/components/Instance.vue b/src/views/settings/components/Instance.vue
index 904fc088..b0cf34ad 100644
--- a/src/views/settings/components/Instance.vue
+++ b/src/views/settings/components/Instance.vue
@@ -71,7 +71,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/JobQueue.vue b/src/views/settings/components/JobQueue.vue
index f823d63a..e1d94167 100644
--- a/src/views/settings/components/JobQueue.vue
+++ b/src/views/settings/components/JobQueue.vue
@@ -38,7 +38,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Logger.vue b/src/views/settings/components/Logger.vue
index aa7e361a..0c21158a 100644
--- a/src/views/settings/components/Logger.vue
+++ b/src/views/settings/components/Logger.vue
@@ -51,7 +51,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/MRF.vue b/src/views/settings/components/MRF.vue
index 8e49ca84..41838421 100644
--- a/src/views/settings/components/MRF.vue
+++ b/src/views/settings/components/MRF.vue
@@ -52,7 +52,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Mailer.vue b/src/views/settings/components/Mailer.vue
index 43812952..cfd098c0 100644
--- a/src/views/settings/components/Mailer.vue
+++ b/src/views/settings/components/Mailer.vue
@@ -41,7 +41,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.$store.state.settings.loading
diff --git a/src/views/settings/components/MediaProxy.vue b/src/views/settings/components/MediaProxy.vue
index a249ba29..fdae5768 100644
--- a/src/views/settings/components/MediaProxy.vue
+++ b/src/views/settings/components/MediaProxy.vue
@@ -26,7 +26,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Metadata.vue b/src/views/settings/components/Metadata.vue
index b43ab85e..78b8d78b 100644
--- a/src/views/settings/components/Metadata.vue
+++ b/src/views/settings/components/Metadata.vue
@@ -30,7 +30,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/Other.vue b/src/views/settings/components/Other.vue
index 0c0a797c..bcae1817 100644
--- a/src/views/settings/components/Other.vue
+++ b/src/views/settings/components/Other.vue
@@ -33,7 +33,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/RateLimiters.vue b/src/views/settings/components/RateLimiters.vue
index 37ff5574..8246836c 100644
--- a/src/views/settings/components/RateLimiters.vue
+++ b/src/views/settings/components/RateLimiters.vue
@@ -32,7 +32,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.$store.state.settings.loading
diff --git a/src/views/settings/components/Upload.vue b/src/views/settings/components/Upload.vue
index a9a57619..b485dc10 100644
--- a/src/views/settings/components/Upload.vue
+++ b/src/views/settings/components/Upload.vue
@@ -44,7 +44,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/components/WebPush.vue b/src/views/settings/components/WebPush.vue
index 9200fc31..4b2216b7 100644
--- a/src/views/settings/components/WebPush.vue
+++ b/src/views/settings/components/WebPush.vue
@@ -26,7 +26,7 @@ export default {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '280px'
+      return this.isMobile ? '120px' : '280px'
     },
     loading() {
       return this.settings.loading
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index 0a5cc15b..2e77f905 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -63,34 +63,36 @@
         <other/>
       </el-tab-pane>
     </el-tabs>
-    <el-select v-if="isMobile" v-model="activeTab" class="settings-menu" placeholder="Select">
-      <el-option
-        v-for="item in options"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-        :disabled="configDisabled"/>
-    </el-select>
-    <activity-pub v-if="activeTab === 'activityPub'"/>
-    <authentication v-if="activeTab === 'auth'"/>
-    <auto-linker v-if="activeTab === 'autoLinker'"/>
-    <esshd v-if="activeTab === 'esshd'"/>
-    <captcha v-if="activeTab === 'captcha'"/>
-    <frontend v-if="activeTab === 'frontend'"/>
-    <gopher v-if="activeTab === 'gopher'"/>
-    <http v-if="activeTab === 'http'"/>
-    <instance v-if="activeTab === 'instance'"/>
-    <job-queue v-if="activeTab === 'jobQueue'"/>
-    <logger v-if="activeTab === 'logger'"/>
-    <mailer v-if="activeTab === 'mailer'"/>
-    <media-proxy v-if="activeTab === 'mediaProxy'"/>
-    <metadata v-if="activeTab === 'metadata'"/>
-    <mrf v-if="activeTab === 'mrf'"/>
-    <rate-limiters v-if="activeTab === 'rateLimiters'"/>
-    <relays v-if="activeTab === 'relays'"/>
-    <web-push v-if="activeTab === 'webPush'"/>
-    <upload v-if="activeTab === 'upload'"/>
-    <other v-if="activeTab === 'other'"/>
+    <div v-if="isMobile">
+      <el-select v-model="activeTab" class="settings-menu" placeholder="Select">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+          :disabled="configDisabled"/>
+      </el-select>
+      <activity-pub v-if="activeTab === 'activityPub'"/>
+      <authentication v-if="activeTab === 'auth'"/>
+      <auto-linker v-if="activeTab === 'autoLinker'"/>
+      <esshd v-if="activeTab === 'esshd'"/>
+      <captcha v-if="activeTab === 'captcha'"/>
+      <frontend v-if="activeTab === 'frontend'"/>
+      <gopher v-if="activeTab === 'gopher'"/>
+      <http v-if="activeTab === 'http'"/>
+      <instance v-if="activeTab === 'instance'"/>
+      <job-queue v-if="activeTab === 'jobQueue'"/>
+      <logger v-if="activeTab === 'logger'"/>
+      <mailer v-if="activeTab === 'mailer'"/>
+      <media-proxy v-if="activeTab === 'mediaProxy'"/>
+      <metadata v-if="activeTab === 'metadata'"/>
+      <mrf v-if="activeTab === 'mrf'"/>
+      <rate-limiters v-if="activeTab === 'rateLimiters'"/>
+      <relays v-if="activeTab === 'relays'"/>
+      <web-push v-if="activeTab === 'webPush'"/>
+      <upload v-if="activeTab === 'upload'"/>
+      <other v-if="activeTab === 'other'"/>
+    </div>
   </div>
 </template>
 
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 023bfcca..e644a9da 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -96,14 +96,14 @@
   .icons-container {
     display: flex;
   }
+  .input-container {
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+  }
   .keyword-inner-input {
     margin-bottom: 22px;
   }
-  label {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
   .limit-button-container {
     display: flex;
     align-items: baseline;
@@ -156,6 +156,9 @@
     width: 47%;
     margin: 0 1% 5px 0
   }
+  .settings-delete-button {
+    margin-left: 5px;
+  }
   .setting-input {
     display: flex;
     margin-bottom: 10px;
@@ -202,9 +205,15 @@
 
   @media only screen and (max-width: 760px),
     (min-device-width: 768px) and (max-device-width: 1024px) {
-    .el-form-item {
-      margin-right: 15px;
+    .input-container {
+      .el-form-item {
+        margin: 0 0 15px 0;
+      }
+      .settings-delete-button {
+        margin: 4px 7px 0 7px;
+      }
     }
+
     .el-input__inner {
     padding: 0 5px 0 5px
     }
@@ -236,10 +245,6 @@
       margin-left: 4px;
       margin-right: 5px
     }
-    .top-margin {
-      position: absolute;
-      top: 25%;
-    }
     .value-input {
       width: 60%;
       margin-left: 5px;