From c3680d50bc542c2b00f0495bbebf3a3c56fb1901 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 24 Sep 2025 20:55:52 +0530
Subject: [PATCH] fix: Remove unnecessary scroll bars from filter dropdown
 (#12515)

---
 .../components-next/copilot/ToggleCopilotAssistant.vue          | 2 +-
 .../dashboard/components-next/filter/inputs/FilterSelect.vue    | 2 +-
 .../dashboard/components-next/filter/inputs/MultiSelect.vue     | 2 +-
 .../dashboard/components-next/filter/inputs/SingleSelect.vue    | 2 +-
 .../components-next/sidebar/SidebarProfileMenuStatus.vue        | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/components-next/copilot/ToggleCopilotAssistant.vue b/app/javascript/dashboard/components-next/copilot/ToggleCopilotAssistant.vue
index ec21cec9f..ccb36da01 100644
--- a/app/javascript/dashboard/components-next/copilot/ToggleCopilotAssistant.vue
+++ b/app/javascript/dashboard/components-next/copilot/ToggleCopilotAssistant.vue
@@ -45,7 +45,7 @@ const activeAssistantLabel = computed(() => {
         />
       </template>
       <DropdownBody class="bottom-9 min-w-64 z-50" strong>
-        <DropdownSection class="max-h-80 overflow-scroll">
+        <DropdownSection class="[&>ul]:max-h-80">
           <DropdownItem
             v-for="assistant in assistants"
             :key="assistant.id"
diff --git a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
index 2c4d0b01f..a5c97b456 100644
--- a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
@@ -91,7 +91,7 @@ const updateSelected = newValue => {
       :class="dropdownPosition"
       strong
     >
-      <DropdownSection class="max-h-80 overflow-scroll">
+      <DropdownSection class="[&>ul]:max-h-80">
         <DropdownItem
           v-for="option in options"
           :key="option.value"
diff --git a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
index be11847fb..7f6bab135 100644
--- a/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue
@@ -123,7 +123,7 @@ const toggleOption = option => {
       </Button>
     </template>
     <DropdownBody class="top-0 min-w-48 z-50" strong>
-      <DropdownSection class="max-h-80 overflow-scroll">
+      <DropdownSection class="[&>ul]:max-h-80">
         <DropdownItem
           v-for="option in options"
           :key="option.id"
diff --git a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
index f743472a3..4c77523c4 100644
--- a/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue
@@ -124,7 +124,7 @@ const toggleSelected = option => {
           :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
         />
       </div>
-      <DropdownSection class="max-h-80 overflow-scroll">
+      <DropdownSection class="[&>ul]:max-h-80">
         <template v-if="searchResults.length">
           <DropdownItem
             v-for="option in searchResults"
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
index 41e64dee1..66e416f96 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
@@ -76,7 +76,7 @@ function changeAvailabilityStatus(availability) {
 </script>
 
 <template>
-  <DropdownSection>
+  <DropdownSection class="[&>ul]:overflow-visible">
     <div class="grid gap-0">
       <DropdownItem preserve-open>
         <div class="flex-grow flex items-center gap-1">