chore: improved option dropdowns responsiveness

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 {

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;
 }

src/styles/_dropdown-filters.scss

@@ -85,7 +85,7 @@ h1.option-title {
   }
 }
 
-@include responsive.smallScreen{
+@include responsive.smallScreen {
   h1 {
     text-align: center;
 

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;

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;

src/views/TrainsView.vue

@@ -130,7 +130,6 @@ export default defineComponent({
   align-items: center;
   gap: 0.5em;
 
-  position: relative;
   margin-bottom: 0.5em;
 }