From d211e962f5c990efc65ad969685bcb6cd782971b Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Mon, 9 Sep 2024 14:16:40 +0200
Subject: [PATCH] fix reporting multiselect dropdowns max height, fixes ST-414

---
 resources/js/Components/Common/Project/ProjectDropdown.vue | 4 +++-
 resources/js/packages/ui/src/Client/ClientDropdown.vue     | 2 +-
 resources/js/packages/ui/src/Input/MultiselectDropdown.vue | 2 +-
 resources/js/packages/ui/src/Input/SelectDropdown.vue      | 2 +-
 resources/js/packages/ui/src/Tag/TagDropdown.vue           | 2 +-
 5 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/resources/js/Components/Common/Project/ProjectDropdown.vue b/resources/js/Components/Common/Project/ProjectDropdown.vue
index 5e80111d..6227775b 100644
--- a/resources/js/Components/Common/Project/ProjectDropdown.vue
+++ b/resources/js/Components/Common/Project/ProjectDropdown.vue
@@ -136,7 +136,9 @@ function updateValue(project: Project) {
                         placeholder="Search for a project..." />
                 </ComboboxAnchor>
                 <ComboboxContent>
-                    <ComboboxViewport ref="dropdownViewport" class="w-60">
+                    <ComboboxViewport
+                        ref="dropdownViewport"
+                        class="w-60 max-h-60 overflow-y-scroll">
                         <ComboboxItem
                             v-if="searchValue === ''"
                             class="data-[highlighted]:bg-card-background-active"
diff --git a/resources/js/packages/ui/src/Client/ClientDropdown.vue b/resources/js/packages/ui/src/Client/ClientDropdown.vue
index 7506f917..35ee3c66 100644
--- a/resources/js/packages/ui/src/Client/ClientDropdown.vue
+++ b/resources/js/packages/ui/src/Client/ClientDropdown.vue
@@ -142,7 +142,7 @@ const highlightedItem = computed(() => {
                 ref="searchInput"
                 class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
                 placeholder="Search for a client..." />
-            <div ref="dropdownViewport" class="w-60">
+            <div ref="dropdownViewport" class="w-60 max-h-60 overflow-y-scroll">
                 <div
                     v-if="
                         searchValue.length > 0 && filteredClients.length === 0
diff --git a/resources/js/packages/ui/src/Input/MultiselectDropdown.vue b/resources/js/packages/ui/src/Input/MultiselectDropdown.vue
index 68f8c6b5..ebbee064 100644
--- a/resources/js/packages/ui/src/Input/MultiselectDropdown.vue
+++ b/resources/js/packages/ui/src/Input/MultiselectDropdown.vue
@@ -165,7 +165,7 @@ const highlightedItem = computed(() => {
                 ref="searchInput"
                 class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
                 :placeholder="searchPlaceholder" />
-            <div ref="dropdownViewport" class="w-60">
+            <div ref="dropdownViewport" class="w-60 max-h-60 overflow-y-scroll">
                 <div
                     v-for="item in filteredItems"
                     :key="props.getKeyFromItem(item)"
diff --git a/resources/js/packages/ui/src/Input/SelectDropdown.vue b/resources/js/packages/ui/src/Input/SelectDropdown.vue
index 9457b494..e0364649 100644
--- a/resources/js/packages/ui/src/Input/SelectDropdown.vue
+++ b/resources/js/packages/ui/src/Input/SelectDropdown.vue
@@ -125,7 +125,7 @@ watch(open, () => {
             <slot name="trigger"> </slot>
         </template>
         <template #content>
-            <div ref="dropdownViewport" class="w-60">
+            <div ref="dropdownViewport" class="w-60 max-h-60 overflow-y-scroll">
                 <div
                     v-for="item in filteredItems"
                     :key="props.getKeyFromItem(item) ?? 'none'"
diff --git a/resources/js/packages/ui/src/Tag/TagDropdown.vue b/resources/js/packages/ui/src/Tag/TagDropdown.vue
index 30d79b84..75acd7e7 100644
--- a/resources/js/packages/ui/src/Tag/TagDropdown.vue
+++ b/resources/js/packages/ui/src/Tag/TagDropdown.vue
@@ -187,7 +187,7 @@ const showCreateTagModal = ref(false);
                 ref="searchInput"
                 class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
                 placeholder="Search for a Tag..." />
-            <div ref="dropdownViewport" class="w-60 max-h-48 overflow-y-scroll">
+            <div ref="dropdownViewport" class="w-60 max-h-60 overflow-y-scroll">
                 <div
                     v-for="tag in filteredTags"
                     :key="tag.id"