Change label position for ActivityPub, Auth, AutoLinker, Captcha and Esshd tabs

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'

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'

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'

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'

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'