diff --git a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
index 56bce8f9d..9f71a8361 100644
--- a/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
+++ b/app/javascript/dashboard/components-next/filter/inputs/FilterSelect.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
+import { useElementBounding, useWindowSize } from '@vueuse/core';
 import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
 import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
 import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
@@ -36,6 +37,13 @@ const selected = defineModel({
   required: true,
 });
 
+const triggerRef = ref(null);
+const dropdownRef = ref(null);
+
+const { top } = useElementBounding(triggerRef);
+const { height } = useWindowSize();
+const { height: dropdownHeight } = useElementBounding(dropdownRef);
+
 const selectedOption = computed(() => {
   return props.options.find(o => o.value === selected.value) || {};
 });
@@ -45,6 +53,16 @@ const iconToRender = computed(() => {
   return selectedOption.value.icon || 'i-lucide-chevron-down';
 });
 
+const dropdownPosition = computed(() => {
+  const DROPDOWN_MAX_HEIGHT = 340;
+  // Get actual height if available or use default
+  const menuHeight = dropdownHeight.value
+    ? dropdownHeight.value + 20
+    : DROPDOWN_MAX_HEIGHT;
+  const spaceBelow = height.value - top.value;
+  return spaceBelow < menuHeight ? 'bottom-0' : 'top-0';
+});
+
 const updateSelected = newValue => {
   selected.value = newValue;
 };
@@ -55,6 +73,7 @@ const updateSelected = newValue => {
     <template #trigger="{ toggle }">
       <slot name="trigger" :toggle="toggle">
         <Button
+          ref="triggerRef"
           sm
           slate
           :variant
@@ -65,7 +84,12 @@ const updateSelected = newValue => {
         />
       </slot>
     </template>
-    <DropdownBody class="top-0 min-w-48 z-50" strong>
+    <DropdownBody
+      ref="dropdownRef"
+      class="min-w-48 z-50"
+      :class="dropdownPosition"
+      strong
+    >
       <DropdownSection class="max-h-80 overflow-scroll">
         <DropdownItem
           v-for="option in options"