hotfixy filtrów

src/components/TrainsView/TrainOptions.vue

@@ -43,15 +43,14 @@
 
           <h1 class="option-title">{{ $t('options.sort-title') }}</h1>
           <div class="options_sorters">
-            <div v-for="opt in translatedSorterOptions">
+            <button
-              <button
+              v-for="opt in translatedSorterOptions"
-                class="sort-option btn--option"
+              class="sort-option btn--option"
-                :data-selected="opt.id == sorterActive.id"
+              :data-selected="opt.id == sorterActive.id"
-                @click="onSorterChange(opt)"
+              @click="onSorterChange(opt)"
-              >
+            >
-                {{ opt.value.toUpperCase() }}
+              {{ opt.value.toUpperCase() }}
-              </button>
+            </button>
-            </div>
           </div>
 
           <h1 class="option-title" v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
@@ -191,19 +190,23 @@ export default defineComponent({
   margin: 0 auto;
 }
 
-.options_filters div {
+.options_sorters {
+  display: flex;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.options_filters > div {
   display: flex;
   width: 100%;
 
   gap: 0.5em;
-  margin-bottom: 0.5em;
 
   button {
     width: 100%;
     color: springgreen;
     font-weight: bold;
 
-    &[data-inactive=true] {
+    &[data-inactive='true'] {
       color: #aaa;
     }
   }

src/styles/filters_options.scss

@@ -77,6 +77,7 @@ h1.option-title {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  gap: 0.5em;
 
   padding: 0.25em 0.25em 0 0;
 }
@@ -84,17 +85,18 @@ h1.option-title {
 .options_filters {
   display: flex;
   flex-wrap: wrap;
+
+  gap: 0.5em;
   margin: 0.5em 0 0 0;
 }
 
 .sort-option,
 .filter-option {
-  margin: 0.25em 0.25em 0.25em 0;
+  padding: 0.25em 0.5em;
 }
 
 .sort-option[data-selected='true'] {
   color: $accentCol;
-  font-weight: bold;
 }
 
 .filter-option {