Client - fix display en medium size screen

fittrackee_client/src/components/Workouts/WorkoutsFilters.vue

@@ -2,7 +2,7 @@
   <div class="workouts-filters">
     <div class="box">
       <form v-on:submit.prevent="onSubmit" class="form">
-        <div class="form">
+        <div class="form-all-items">
           <div class="form-items-group">
             <div class="form-item">
               <label> {{ $t('workouts.FROM') }}: </label>
@@ -44,10 +44,7 @@
                 </option>
               </select>
             </div>
-          </div>
+            <div class="form-item form-item-title">
-
-          <div class="form-items-group">
-            <div class="form-item">
               <label> {{ $t('workouts.TITLE', 1) }}:</label>
               <div class="form-inputs-group">
                 <input
@@ -250,6 +247,7 @@
 
   .workouts-filters {
     .form {
+      .form-all-items {
         display: flex;
         flex-direction: column;
         padding-top: 0;
@@ -272,9 +270,6 @@
               input {
                 width: 34%;
               }
-            input.title {
-              width: 100%;
-            }
               span {
                 padding: $default-padding * 0.5;
               }
@@ -285,10 +280,17 @@
             }
 
             select {
-            height: 36px;
+              height: 38px;
               padding: 0 $default-padding * 0.5;
             }
           }
+          .form-item-title {
+            padding-top: $default-padding;
+            input.title {
+              width: 100%;
+            }
+          }
+        }
       }
     }
 
@@ -306,6 +308,7 @@
 
     @media screen and (max-width: $medium-limit) {
       .form {
+        .form-all-items {
           flex-direction: row;
           padding-top: $default-padding * 0.5;
 
@@ -314,7 +317,7 @@
             height: 100%;
 
             .form-item {
-            label {
+              label, span {
                 font-size: 0.9em;
               }
 
@@ -324,8 +327,16 @@
                 padding: 0;
 
                 input {
-                width: 75%;
+                  width: 85%;
                 }
+                span {
+                  padding: 0;
+                }
+              }
+            }
+
+            .form-item-title {
+              padding-top: 0;
             }
           }
         }
@@ -341,6 +352,7 @@
     }
     @media screen and (max-width: $small-limit) {
       .form {
+        .form-all-items {
           flex-direction: column;
           padding-top: 0;
 
@@ -356,9 +368,11 @@
                 flex-direction: row;
                 justify-content: space-around;
                 align-items: center;
+
                 input {
                   width: 50%;
                 }
+
                 span {
                   padding: $default-padding * 0.5;
                 }
@@ -366,6 +380,7 @@
             }
           }
         }
+      }
       .form-button {
         flex-wrap: initial;
         button {
@@ -378,6 +393,20 @@
       .form-button {
         flex-wrap: wrap;
       }
+      .form {
+        .form-all-items {
+
+          .form-items-group {
+            .form-item-title {
+              padding-top: $default-padding;
+
+              input.title {
+                width: 100%;
+              }
+            }
+          }
+        }
+      }
     }
   }
 </style>