Fix mobile-UI for reports section

src/components/Status/index.vue

@@ -267,9 +267,8 @@ export default {
     font-style: italic;
   }
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .el-message {
     min-width: 80%;
   }

src/views/reports/components/GroupedReport.vue

@@ -140,9 +140,8 @@ export default {
   .reported-status {
     margin-top: 15px;
   }
-  @media
-  only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
+
+  @media only screen and (max-width:480px) {
     .grouped-report {
       .header-container {
         display: flex;
@@ -158,5 +157,13 @@ export default {
         margin-bottom: 7px;
       }
     }
+    .block {
+      .reports-timeline .el-timeline {
+        margin: 20px 10px;
+        .el-timeline-item__wrapper {
+          padding-left: 20px;
+        }
+      }
+    }
   }
 </style>

src/views/reports/components/NoteCard.vue

@@ -97,9 +97,8 @@ export default {
     display: flex;
     justify-content: space-between;
   }
-  @media
-  only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
+
+  @media only screen and (max-width:480px) {
     .el-card__header {
       padding: 10px 17px;
     }

src/views/reports/components/Report.vue

@@ -74,7 +74,7 @@
                 v-model="notes[report.id]"
                 :placeholder="$t('reports.leaveNote')"
                 type="textarea"
-                rows="3"/>
+                rows="2"/>
               <div class="report-post-note">
                 <el-button @click="handleNewNote(report.id)">{{ $t('reports.postNote') }}</el-button>
               </div>
@@ -279,9 +279,8 @@ export default {
     font-style: italic;
     color: gray;
   }
-  @media
-  only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
+
+  @media only screen and (max-width:480px) {
     .report {
       .header-container {
         display: flex;
@@ -303,5 +302,11 @@ export default {
         margin-bottom: 7px;
       }
     }
+    .reports-timeline {
+      margin: 20px 10px;
+      .el-timeline-item__wrapper {
+        padding-left: 20px;
+      }
+    }
   }
 </style>

src/views/reports/components/ReportCard.vue

@@ -108,9 +108,8 @@ export default {
     display: flex;
     justify-content: space-between;
   }
-  @media
-  only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
+
+  @media only screen and (max-width:480px) {
     .el-card__header {
       padding: 10px 17px;
     }

src/views/reports/components/ReportsFilter.vue

@@ -54,12 +54,17 @@ export default {
 .select-field {
   width: 350px;
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .select-field {
     width: 100%;
     margin-bottom: 5px;
   }
 }
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .select-field {
+    width: 50%;
+  }
+}
 </style>

src/views/reports/index.vue

@@ -92,9 +92,8 @@ export default {
     font-size: 28px;
   }
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .reports-container {
     h1 {
       margin: 7px 10px 15px 10px;
@@ -103,8 +102,5 @@ only screen and (max-width: 760px),
       margin: 0 10px;
     }
   }
-  #app > div > div.main-container > section > div > div.block > ul {
-    margin: 45px 45px 5px 19px;
-  }
 }
 </style>

src/views/settings/styles/main.scss

@@ -520,8 +520,8 @@
       margin-right: 8px
     }
   }
-  @media only screen and (max-width:801px) and (min-width: 481px) {
 
+  @media only screen and (max-width:801px) and (min-width: 481px) {
     .delete-setting-button {
       margin: 4px 0 0 10px;
       height: 28px;

src/views/statuses/index.vue

@@ -129,9 +129,7 @@ h1 {
   margin: 22px 0 0 0;
 }
 
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+@media only screen and (max-width:480px) {
   .filter-container {
     display: flex;
     height: 36px;

src/views/users/components/UsersFilter.vue

@@ -61,12 +61,17 @@ export default {
 .select-field {
   width: 350px;
 }
-@media
-only screen and (max-width: 760px),
-(min-device-width: 768px) and (max-device-width: 1024px) {
+
+@media only screen and (max-width:480px) {
   .select-field {
     width: 100%;
     margin-bottom: 5px;
   }
 }
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .select-field {
+    width: 50%;
+  }
+}
 </style>