From ff78eba927bde23363b3dccc22728be6d3e0d8c6 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 15 Mar 2023 18:15:01 +0100
Subject: [PATCH] =?UTF-8?q?hotfixy=20filtr=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TrainsView/TrainOptions.vue | 27 ++++++++++++----------
 src/styles/filters_options.scss            |  6 +++--
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index ea18d4e..a30693e 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/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
-                class="sort-option btn--option"
-                :data-selected="opt.id == sorterActive.id"
-                @click="onSorterChange(opt)"
-              >
-                {{ opt.value.toUpperCase() }}
-              </button>
-            </div>
+            <button
+              v-for="opt in translatedSorterOptions"
+              class="sort-option btn--option"
+              :data-selected="opt.id == sorterActive.id"
+              @click="onSorterChange(opt)"
+            >
+              {{ opt.value.toUpperCase() }}
+            </button>
           </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;
     }
   }
diff --git a/src/styles/filters_options.scss b/src/styles/filters_options.scss
index 22e2060..dc28240 100644
--- a/src/styles/filters_options.scss
+++ b/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 {