From 1ad4cc277cd168975e294feed52f3b1b8534d328 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sat, 7 Mar 2020 01:08:48 +0300
Subject: [PATCH] Fix styles for desktop, tablet and mobile versions

---
 .../components/inputComponents/CrontabInput.vue     | 13 +++++--------
 src/views/settings/styles/main.scss                 | 10 ++++++++++
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/views/settings/components/inputComponents/CrontabInput.vue b/src/views/settings/components/inputComponents/CrontabInput.vue
index 9bf3f5ec..1f6f3af1 100644
--- a/src/views/settings/components/inputComponents/CrontabInput.vue
+++ b/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'
       }
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 5b68e0c6..562308b5 100644
--- a/src/views/settings/styles/main.scss
+++ b/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;
       }