From 221bba32d215f85ab19f9d2b4c6978fc56723403 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 16 Apr 2026 14:45:12 +0200
Subject: [PATCH] chore: improved option dropdowns responsiveness

---
 src/components/JournalView/JournalOptions.vue | 3 ++-
 src/components/TrainsView/TrainOptions.vue    | 4 ++++
 src/styles/_dropdown-filters.scss             | 2 +-
 src/styles/_dropdown.scss                     | 3 +--
 src/styles/_journal-section.scss              | 5 ++---
 src/views/TrainsView.vue                      | 1 -
 6 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index ba78909..a7a1484 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/src/components/JournalView/JournalOptions.vue
@@ -336,7 +336,8 @@ export default defineComponent({
   display: grid;
   grid-template-rows: 1fr auto;
   overflow: hidden;
-  max-height: 530px;
+  max-height: calc(100% - 4.5em);
+  top: 3.5em;
 }
 
 .options_content {
diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index 8805099..1a3ac1d 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -210,6 +210,10 @@ export default defineComponent({
 @use '../../styles/dropdown';
 @use '../../styles/dropdown-filters';
 
+.dropdown_wrapper {
+  top: 2.5em;
+}
+
 .search_content > div {
   margin: 0.5em auto;
 }
diff --git a/src/styles/_dropdown-filters.scss b/src/styles/_dropdown-filters.scss
index 6bcbb4f..d3db06a 100644
--- a/src/styles/_dropdown-filters.scss
+++ b/src/styles/_dropdown-filters.scss
@@ -85,7 +85,7 @@ h1.option-title {
   }
 }
 
-@include responsive.smallScreen{
+@include responsive.smallScreen {
   h1 {
     text-align: center;
 
diff --git a/src/styles/_dropdown.scss b/src/styles/_dropdown.scss
index 3199222..a8628f7 100644
--- a/src/styles/_dropdown.scss
+++ b/src/styles/_dropdown.scss
@@ -26,7 +26,7 @@
 .dropdown_wrapper {
   position: absolute;
   left: 0;
-  top: calc(100% + 0.5em);
+  top: 0;
 
   background-color: var(--clr-bg3);
   box-shadow: 0 0 5px 1px var(--clr-primary);
@@ -34,7 +34,6 @@
   width: 100%;
   max-width: 550px;
 
-  max-height: 750px;
   overflow: auto;
 
   padding: 1em;
diff --git a/src/styles/_journal-section.scss b/src/styles/_journal-section.scss
index f809b29..6bb8832 100644
--- a/src/styles/_journal-section.scss
+++ b/src/styles/_journal-section.scss
@@ -24,8 +24,8 @@
   width: 100%;
 
   margin: 0 auto;
-
   padding: 1em 0;
+  position: relative;
 }
 
 .journal_refreshed-date {
@@ -57,7 +57,6 @@
   justify-content: space-between;
   align-items: center;
   gap: 0.5em;
-  position: relative;
 }
 
 .btn--load-data {
@@ -68,7 +67,7 @@
   font-size: 1.2em;
 }
 
-@include responsive.smallScreen{
+@include responsive.smallScreen {
   .journal_top-bar {
     justify-content: center;
     flex-wrap: wrap;
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index 5ba5ad2..80ca266 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -130,7 +130,6 @@ export default defineComponent({
   align-items: center;
   gap: 0.5em;
 
-  position: relative;
   margin-bottom: 0.5em;
 }