Fix styles for desktop, tablet and mobile versions

src/views/settings/components/inputComponents/CrontabInput.vue

@@ -1,16 +1,13 @@
 <template>
-  <div class="crontab">
-    <el-form-item v-for="worker in workers" :key="worker" :label="worker" :label-width="labelWidth" class="crontab-container">
-      <span slot="label" class="crontab-label">
-        {{ worker }}
-      </span>
+  <el-form :label-width="labelWidth" :label-position="isMobile ? 'top' : 'right'" class="crontab">
+    <el-form-item v-for="worker in workers" :key="worker" :label="worker" class="crontab-container">
       <el-input
         :value="data[worker]"
         :placeholder="getSuggestion(worker) || null"
-        class="input setting-input crontab-input"
+        class="input setting-input"
         @input="update($event, worker)"/>
     </el-form-item>
-  </div>
+  </el-form>
 </template>
 
 <script>
@@ -48,7 +45,7 @@ export default {
     },
     labelWidth() {
       if (this.isMobile) {
-        return '120px'
+        return '100%'
       } else {
         return '380px'
       }

src/views/settings/styles/main.scss

@@ -335,6 +335,12 @@
   }
 
   @media only screen and (max-width:480px) {
+    .crontab {
+      width: 100%;
+      label {
+        width: 100%;
+      }
+    }
     .delete-setting-button {
       margin: 4px 0 0 5px;
       height: 28px;
@@ -378,6 +384,10 @@
         margin: 0;
         padding: 0 15px 10px 0;
       }
+      .el-form-item.crontab-container:first-child {
+        margin: 0;
+        padding: 0 ;
+      }
       .el-form-item:first-child .mascot-form-item {
         padding: 0;
       }