From d68367eb376818ea06bab5805e39892221ed5be4 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Mon, 20 Nov 2023 16:35:21 +0100
Subject: [PATCH] Fix filters layout [SCI-9697]

---
 .../vue/shared/filters/inputs/date_range_filter.vue         | 4 +++-
 app/views/shared/filter_dropdown/_datetime_search.html.erb  | 6 +++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/javascript/vue/shared/filters/inputs/date_range_filter.vue b/app/javascript/vue/shared/filters/inputs/date_range_filter.vue
index 1108f1898..afa423914 100644
--- a/app/javascript/vue/shared/filters/inputs/date_range_filter.vue
+++ b/app/javascript/vue/shared/filters/inputs/date_range_filter.vue
@@ -1,14 +1,16 @@
 <template>
   <div class="mb-6">
     <label class="sci-label">{{ filter.label }}</label>
-    <div class="flex items-center gap-5">
+    <div class="flex items-center gap-2 flex-col">
       <DateTimePicker
+        class="w-full"
         @change="updateDateFrom"
         :placeholder="i18n.t('From')"
         :dateOnly="true"
         :selectorId="`DatePicker${filter.key}`"
       />
       <DateTimePicker
+        class="w-full"
         @change="updateDateTo"
         :placeholder="i18n.t('To')"
         :dateOnly="true"
diff --git a/app/views/shared/filter_dropdown/_datetime_search.html.erb b/app/views/shared/filter_dropdown/_datetime_search.html.erb
index a779c43cf..0c90d38a9 100644
--- a/app/views/shared/filter_dropdown/_datetime_search.html.erb
+++ b/app/views/shared/filter_dropdown/_datetime_search.html.erb
@@ -2,14 +2,14 @@
     <div class="created-on-label">
       <label class="sci-label"><%= label %></label>
     </div>
-    <div class="flex items-center gap-4">
-      <div class="datetime-picker-container flex">
+    <div class="flex items-center flex-col gap-2">
+      <div class="datetime-picker-container flex w-full">
         <div id="<%= "#{container_class}_from_container" %>" class="vue-date-time-picker-filter grow">
           <input ref="input" class="from-date" type="hidden" v-model="date" id="<%= "#{container_class}_from" %>" />
           <date-time-picker class="w-full" @cleared="clearDate" ref="vueDateTime" @change="updateDate" mode="datetime" placeholder="<%= t('filters_modal.from_placeholder') %>"></date-time-picker>
         </div>
       </div>
-      <div class="datetime-picker-container flex">
+      <div class="datetime-picker-container flex w-full">
         <div id="<%= "#{container_class}_to_container" %>" class="vue-date-time-picker-filter grow">
           <input ref="input" class="to-date" type="hidden" v-model="date" id="<%= "#{container_class}_to" %>" />
           <date-time-picker class="w-full" @cleared="clearDate" ref="vueDateTime" @change="updateDate" mode="datetime" placeholder="<%= t('filters_modal.to_placeholder') %>"></date-time-picker>