fix(options): dropdown responsiveness

src/components/JournalView/JournalOptions.vue

@@ -120,15 +120,15 @@
               </div>
             </section>
           </div>
+        </div>
 
-          <div class="options_actions">
+        <div class="options_actions">
-            <button class="btn--action" @click="onResetButtonClick">
+          <button class="btn--action" @click="onResetButtonClick">
-              {{ $t('options.reset-button') }}
+            {{ $t('options.reset-button') }}
-            </button>
+          </button>
-            <button class="btn--action" @click="onSearchButtonConfirm">
+          <button class="btn--action" @click="onSearchButtonConfirm">
-              {{ $t('options.search-button') }}
+            {{ $t('options.search-button') }}
-            </button>
+          </button>
-          </div>
         </div>
       </div>
     </transition>
@@ -330,8 +330,16 @@ export default defineComponent({
 <style lang="scss" scoped>
 @use '../../styles/dropdown';
 @use '../../styles/dropdown-filters';
+@use '../../styles/responsive';
 
-.filters-options > .dropdown_wrapper {
+.dropdown_wrapper {
-  max-height: calc(100vh - 18.5em);
+  display: grid;
+  grid-template-rows: 1fr auto;
+  overflow: hidden;
+  max-height: 530px;
+}
+
+.options_content {
+  overflow: auto;
 }
 </style>

src/styles/_dropdown-filters.scss

@@ -78,7 +78,7 @@ h1.option-title {
   display: flex;
   gap: 0.5em;
   width: 100%;
-  margin-top: 1em;
+  margin-top: 0.5em;
 
   button {
     width: 100%;

src/styles/_dropdown.scss

@@ -40,10 +40,3 @@
   padding: 1em;
   z-index: 100;
 }
-
-@include responsive.smallScreen {
-  .dropdown_wrapper {
-    font-size: 1.1em;
-    max-width: 100%;
-  }
-}