From 1b1b2aa38d8c9c6775de2da55e2841fd2a76317b Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Fri, 14 Jun 2024 09:46:09 -0300
Subject: [PATCH] Responsiveness improvements to date and numeric filter.

---
 .../checkbox/TainacanFilterCheckbox.vue          |  2 +-
 .../filter-types/date/TainacanFilterDate.vue     | 10 +++++++++-
 .../numeric/TainacanFilterNumeric.vue            | 16 +++++++++++++---
 .../taxonomy/TainacanFilterCheckbox.vue          | 11 ++++++++++-
 .../components/search/filters-items-list.vue     |  6 ++++++
 5 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/views/admin/components/filter-types/checkbox/TainacanFilterCheckbox.vue b/src/views/admin/components/filter-types/checkbox/TainacanFilterCheckbox.vue
index 918db5a72..51577d85c 100644
--- a/src/views/admin/components/filter-types/checkbox/TainacanFilterCheckbox.vue
+++ b/src/views/admin/components/filter-types/checkbox/TainacanFilterCheckbox.vue
@@ -26,7 +26,7 @@
                                             hide: 100,
                                         },
                                         content: option.label,
-                                        autoHide: trie,
+                                        autoHide: true,
                                         popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
                                         placement: 'auto-start'
                                     }"
diff --git a/src/views/admin/components/filter-types/date/TainacanFilterDate.vue b/src/views/admin/components/filter-types/date/TainacanFilterDate.vue
index d89351978..b8e3b3bb0 100644
--- a/src/views/admin/components/filter-types/date/TainacanFilterDate.vue
+++ b/src/views/admin/components/filter-types/date/TainacanFilterDate.vue
@@ -215,8 +215,16 @@
     .date-filter-container {
         display: flex;
         height: auto;
+        align-items: stretch;
 
-        @media screen and (min-width: 769px) and (max-width: 1500px) {
+        @supports not (contain: inline-size) {
+            @media screen and (min-width: 769px) and (max-width: 1500px) {
+                flex-wrap: wrap;
+                height: 60px;
+            }
+        }
+
+        @container filterscomponentslist (max-width: 170px) {
             flex-wrap: wrap;
             height: 60px;
         }
diff --git a/src/views/admin/components/filter-types/numeric/TainacanFilterNumeric.vue b/src/views/admin/components/filter-types/numeric/TainacanFilterNumeric.vue
index bb941c3d0..fed6bec47 100644
--- a/src/views/admin/components/filter-types/numeric/TainacanFilterNumeric.vue
+++ b/src/views/admin/components/filter-types/numeric/TainacanFilterNumeric.vue
@@ -157,15 +157,25 @@
         height: auto;
         align-items: stretch;
 
-        @media screen and (min-width: 769px) and (max-width: 1500px) {
+        @supports not (contain: inline-size) {
+            @media screen and (min-width: 769px) and (max-width: 1500px) {
+                flex-wrap: wrap;
+                height: 60px;
+            }
+        }
+
+        @container filterscomponentslist (max-width: 170px) {
             flex-wrap: wrap;
-            align-items: stretch;
             height: 60px;
+
+            .dropdown {
+                flex-grow: 2 !important;
+            }
         }
         
         .dropdown {
             width: auto;
-            flex-grow: 2;
+            flex-grow: 0;
 
             .dropdown-trigger button {
                 padding: 2px 0.5em 2px 0.5em !important;
diff --git a/src/views/admin/components/filter-types/taxonomy/TainacanFilterCheckbox.vue b/src/views/admin/components/filter-types/taxonomy/TainacanFilterCheckbox.vue
index 40e6532f1..59d6de1fb 100644
--- a/src/views/admin/components/filter-types/taxonomy/TainacanFilterCheckbox.vue
+++ b/src/views/admin/components/filter-types/taxonomy/TainacanFilterCheckbox.vue
@@ -21,7 +21,16 @@
                         <span class="check" /> 
                         <span class="control-label">
                             <span 
-                                    :title="option.label"
+                                    v-tooltip="{
+                                        delay: {
+                                            show: 800,
+                                            hide: 100,
+                                        },
+                                        content: option.label,
+                                        autoHide: true,
+                                        popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                        placement: 'auto-start'
+                                    }"
                                     class="checkbox-label-text">
                                 {{ option.label }}
                             </span> 
diff --git a/src/views/admin/components/search/filters-items-list.vue b/src/views/admin/components/search/filters-items-list.vue
index 1f566b946..556203823 100644
--- a/src/views/admin/components/search/filters-items-list.vue
+++ b/src/views/admin/components/search/filters-items-list.vue
@@ -492,6 +492,12 @@
     .filters-components-list {
         margin-bottom: 64px;
     }
+    @supports (contain: inline-size) {
+        .filters-components-list {
+            container-type: inline-size;
+            container-name: filterscomponentslist; 
+        }
+    }
     .collection-name {
         color: var(--tainacan-heading-color);
         font-size: 0.875em;