Poprawki responsywności selectboxów

src/components/Global/SelectBox.vue

@@ -131,6 +131,7 @@ export default defineComponent({
 
 .select-box {
   position: relative;
+  width: auto;
 }
 
 .arrow {

src/components/JournalView/JournalOptions.vue

@@ -20,7 +20,9 @@
               @keydown.enter="onInputSearch"
             />
 
-            <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
+            <button class="search-exit">
+              <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
+            </button>
           </div>
           <!-- <div class="search-box">
             <input
@@ -88,10 +90,9 @@ export default defineComponent({
     },
   },
 
-
   setup() {
     return {
-      searchersValues: inject('searchersValues') as {[key: string]: string},
+      searchersValues: inject('searchersValues') as { [key: string]: string },
       sorterActive: inject('sorterActive') as { id: string | number; dir: number },
       journalFilterActive: inject('journalFilterActive') as JournalFilter,
     };
@@ -134,6 +135,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive';
 @import '../../styles/option.scss';
+@import '../../styles/search_box.scss';
 
 .options {
   &_wrapper {
@@ -178,39 +180,11 @@ export default defineComponent({
   }
 }
 
-.search {
-  &-box {
-    position: relative;
-
-    background: #333;
-    border-radius: 0.5em;
-    min-width: 200px;
-    margin-right: 0.25em;
-  }
-
-  &-input {
-    border: none;
-
-    min-width: 100%;
-    padding: 0.35em 0.5em;
-  }
-
-  &-exit {
-    position: absolute;
-    cursor: pointer;
-
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
-
-    width: 1em;
-  }
-}
-
 @include smallScreen() {
   .journal-options {
     width: 100%;
   }
+
   .options {
     &_wrapper {
       justify-content: center;
@@ -240,21 +214,5 @@ export default defineComponent({
       }
     }
   }
-
-  .search {
-    &-box,
-    &-button {
-      margin: 0.5em 0 0 0;
-    }
-
-    &-box {
-      width: 100%;
-    }
-
-    &-button {
-      width: 80%;
-      max-width: 300px;
-    }
-  }
 }
 </style>

src/components/TrainsView/TrainOptions.vue

@@ -15,13 +15,17 @@
           <div class="search-box">
             <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
 
-            <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedTrain = '')" />
+            <button class="search-exit">
+              <img :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedTrain = '')" />
+            </button>
           </div>
 
           <div class="search-box">
             <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
 
-            <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedDriver = '')" />
+            <button class="search-exit">
+              <img :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedDriver = '')" />
+            </button>
           </div>
         </div>
       </div>
@@ -130,8 +134,8 @@ export default defineComponent({
 
     resetFilters() {
       this.filterList.forEach((f) => (f.isActive = true));
-      this.searchedDriver = "";
-      this.searchedTrain = "";
+      this.searchedDriver = '';
+      this.searchedTrain = '';
     },
   },
 });
@@ -139,10 +143,12 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../../styles/responsive';
+@import '../../styles/search_box.scss';
 
 .train-options {
   @include smallScreen() {
     width: 100%;
+    font-size: 1.25em;
   }
 }
 
@@ -166,34 +172,6 @@ export default defineComponent({
   }
 }
 
-.search {
-  &-box {
-    position: relative;
-
-    background: #333;
-    border-radius: 0.5em;
-    min-width: 200px;
-    margin-right: 0.25em;
-  }
-
-  &-input {
-    border: none;
-
-    min-width: 100%;
-    padding: 0.35em 0.5em;
-  }
-
-  &-exit {
-    position: absolute;
-    cursor: pointer;
-
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
-
-    width: 1em;
-  }
-}
 .filters {
   display: flex;
   flex-wrap: wrap;
@@ -227,6 +205,7 @@ export default defineComponent({
   .journal-options {
     width: 100%;
   }
+
   .options {
     &_wrapper {
       justify-content: center;
@@ -247,21 +226,5 @@ export default defineComponent({
       }
     }
   }
-
-  .search {
-    &-box,
-    &-button {
-      margin: 0.5em 0 0 0;
-    }
-
-    &-box {
-      width: 100%;
-    }
-
-    &-button {
-      width: 80%;
-      max-width: 300px;
-    }
-  }
 }
 </style>

src/styles/JournalSection.scss

@@ -60,7 +60,7 @@
 }
 
 @include smallScreen() {
-  .journal-wrapper {
+  .journal_wrapper {
     font-size: 1.25em;
   }
 

src/styles/search_box.scss

@@ -0,0 +1,51 @@
+@import 'responsive.scss';
+
+.search {
+  &-box {
+    position: relative;
+
+    display: flex;
+
+    border-radius: 0.5em;
+    min-width: 200px;
+    margin-right: 0.25em;
+    background-color: #333;
+  }
+
+  &-input {
+    border: none;
+    border-radius: 0.5em 0 0 0.5em;
+    background-color: #333;
+
+    padding: 0.35em 0.5em;
+    margin-right: 0.2em;
+    width: 100%;
+  }
+
+  &-exit {
+    background-color: #333;
+    padding: 0 0.5em;
+    border-radius: 0 0.5em 0.5em 0;
+
+    img {
+      vertical-align: middle;
+      height: 1.3em;
+    }
+  }
+
+  @include smallScreen {
+    &-box,
+    &-button {
+      margin: 0.5em 0 0 0;
+    }
+
+    &-box {
+      width: 100%;
+    }
+
+    &-button {
+      width: 80%;
+      max-width: 300px;
+    }
+  }
+}

src/views/TrainsView.vue

@@ -103,9 +103,4 @@ export default defineComponent({
   max-width: 1350px;
 }
 
-@include smallScreen {
-  .options-bar {
-    font-size: 1.25em;
-  }
-}
 </style>