diff --git a/packages/design-system/src/components/OcDrop/OcDrop.spec.ts b/packages/design-system/src/components/OcDrop/OcDrop.spec.ts
index 4f053ce843..8e9dd9febd 100644
--- a/packages/design-system/src/components/OcDrop/OcDrop.spec.ts
+++ b/packages/design-system/src/components/OcDrop/OcDrop.spec.ts
@@ -1,6 +1,5 @@
 import { defaultPlugins, mount, shallowMount } from '@opencloud-eu/web-test-helpers'
 import Drop from './OcDrop.vue'
-import { getTailwindPaddingClass, SizeType } from '../../helpers'
 import { computed, nextTick } from 'vue'
 import { useIsMobile } from '../../composables'
 
@@ -53,25 +52,6 @@ describe('OcDrop', () => {
     }
   })
 
-  it.each<SizeType | 'remove'>([
-    'xsmall',
-    'small',
-    'medium',
-    'large',
-    'xlarge',
-    'xxlarge',
-    'remove'
-  ])('handles padding size prop for value %s', async (size) => {
-    const { wrapper } = dom({ paddingSize: size })
-
-    const drop = wrapper.findComponent({ name: 'oc-drop' })
-    await nextTick()
-
-    const tailwindClassObj = getTailwindPaddingClass(size)
-    const tailwindClass = Object.entries(tailwindClassObj).find(([, v]) => v)?.[0]
-    expect(drop.html().includes(tailwindClass)).toBeTruthy()
-  })
-
   describe('tippy', () => {
     it('inits tippy', async () => {
       const { wrapper } = dom()
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
index a82fdec415..0a9f3cc1bd 100644
--- a/packages/design-system/src/components/OcDrop/OcDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -13,10 +13,10 @@
     <slot />
   </oc-bottom-drawer>
   <div v-else :id="dropId" ref="drop" class="oc-drop shadow-md/20 rounded-sm" @click="onClick">
-    <oc-card v-if="$slots.default" :body-class="[getTailwindPaddingClass(paddingSize)]">
+    <oc-card v-if="isOpen && $slots.default" :body-class="[getTailwindPaddingClass(paddingSize)]">
       <slot />
     </oc-card>
-    <slot v-else name="special" />
+    <slot v-else-if="isOpen" name="special" />
   </div>
 </template>
 
@@ -140,6 +140,7 @@ const emit = defineEmits<Emits>()
 defineSlots<Slots>()
 
 const { isMobile } = useIsMobile()
+const isOpen = ref(false)
 
 const useBottomDrawer = computed(() => unref(isMobile) && !enforceDropOnMobile)
 const bottomDrawerRef = useTemplateRef<typeof OcBottomDrawer>('bottomDrawerRef')
@@ -182,10 +183,6 @@ const onFocusOut = (event: FocusEvent) => {
   }
 }
 
-onBeforeUnmount(() => {
-  drop.value?.removeEventListener('focusout', onFocusOut)
-})
-
 const triggerMapping = computed(() => {
   return (
     {
@@ -211,6 +208,7 @@ watch(
 )
 
 onBeforeUnmount(() => {
+  unref(drop)?.removeEventListener('focusout', onFocusOut)
   destroy(unref(tippyInstance))
 })
 
@@ -236,15 +234,17 @@ const initializeTippy = () => {
     theme: 'none',
     maxWidth: 416,
     offset,
-    ...(!isNestedElement && {
-      onShow: (instance) => {
-        emit('showDrop')
+    onShow: (instance) => {
+      isOpen.value = true
+      emit('showDrop')
+      if (!isNestedElement) {
         hideAll({ exclude: instance })
-      },
-      onHide: () => {
-        emit('hideDrop')
       }
-    }),
+    },
+    onHide: () => {
+      isOpen.value = false
+      emit('hideDrop')
+    },
     popperOptions: {
       ...popperOptions,
       modifiers: [
diff --git a/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap b/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap
index a67d5a7782..6e077773eb 100644
--- a/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap
+++ b/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`OcDrop > tippy > renders tippy 1`] = `
   </p>
   <div
     data-tippy-root=""
-    id="tippy-10"
+    id="tippy-3"
     style="z-index: 9999; visibility: visible; position: absolute; left: 0px; top: auto; margin: 0px; right: auto; bottom: 0px; transform: translate(0px, 0px); max-height: -20px; overflow-y: auto; overflow-x: hidden;"
   >
     <div
@@ -32,7 +32,7 @@ exports[`OcDrop > tippy > renders tippy 1`] = `
       >
         <div
           class="oc-drop shadow-md/20 rounded-sm"
-          id="oc-drop-15"
+          id="oc-drop-8"
         >
           <div
             class="oc-card"
@@ -68,7 +68,7 @@ exports[`OcDrop > tippy > renders tippy 2`] = `
   </p>
   <div
     data-tippy-root=""
-    id="tippy-10"
+    id="tippy-3"
     style="z-index: 9999; visibility: hidden; position: absolute; left: 0px; top: auto; margin: 0px; right: auto; bottom: 0px; transform: translate(0px, 0px); max-height: -20px; overflow-y: auto; overflow-x: hidden; pointer-events: none;"
   >
     <div
@@ -90,25 +90,9 @@ exports[`OcDrop > tippy > renders tippy 2`] = `
       >
         <div
           class="oc-drop shadow-md/20 rounded-sm"
-          id="oc-drop-15"
+          id="oc-drop-8"
         >
-          <div
-            class="oc-card"
-          >
-            <!--v-if-->
-             
-            <div
-              class="oc-card-body p-4"
-            >
-              
-              
-              show
-              
-              
-            </div>
-             
-            <!--v-if-->
-          </div>
+          <!--v-if-->
         </div>
       </div>
     </div>
@@ -126,7 +110,7 @@ exports[`OcDrop > tippy > renders tippy 3`] = `
   </p>
   <div
     data-tippy-root=""
-    id="tippy-10"
+    id="tippy-3"
     style="z-index: 9999; visibility: visible; position: absolute; left: 0px; top: auto; margin: 0px; right: auto; bottom: 0px; transform: translate(0px, 0px); max-height: -20px; overflow-y: auto; overflow-x: hidden;"
   >
     <div
@@ -148,7 +132,7 @@ exports[`OcDrop > tippy > renders tippy 3`] = `
       >
         <div
           class="oc-drop shadow-md/20 rounded-sm"
-          id="oc-drop-15"
+          id="oc-drop-8"
         >
           <div
             class="oc-card"
diff --git a/packages/design-system/src/helpers/tailwind.spec.ts b/packages/design-system/src/helpers/tailwind.spec.ts
new file mode 100644
index 0000000000..2cef57bcb1
--- /dev/null
+++ b/packages/design-system/src/helpers/tailwind.spec.ts
@@ -0,0 +1,15 @@
+import { getTailwindPaddingClass } from './tailwind'
+import { SizeType } from './types'
+
+it.each<{ size: SizeType | 'remove'; class: string }>([
+  { size: 'xsmall', class: 'p-1' },
+  { size: 'small', class: 'p-2' },
+  { size: 'medium', class: 'p-4' },
+  { size: 'large', class: 'p-6' },
+  { size: 'xlarge', class: 'p-12' },
+  { size: 'xxlarge', class: 'p-24' },
+  { size: 'remove', class: 'p-0' }
+])('gets the correct tailwind padding class for a given size', ({ size, class: tailwindClass }) => {
+  const tailwindClassObj = getTailwindPaddingClass(size) as Record<string, boolean>
+  expect(tailwindClassObj[tailwindClass]).toBeTruthy()
+})
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
index 1d4ff7df4b..212689170a 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
@@ -171,11 +171,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
               <div id="context-menu-drop-1" class="oc-drop shadow-md/20 rounded-sm">
-                <div class="oc-card">
-                  <!--v-if-->
-                  <div class="oc-card-body p-2"></div>
-                  <!--v-if-->
-                </div>
+                <!--v-if-->
               </div>
             </button></div>
         </td>
@@ -233,11 +229,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
               <div id="context-menu-drop-2" class="oc-drop shadow-md/20 rounded-sm">
-                <div class="oc-card">
-                  <!--v-if-->
-                  <div class="oc-card-body p-2"></div>
-                  <!--v-if-->
-                </div>
+                <!--v-if-->
               </div>
             </button></div>
         </td>
diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 2b53ef2bc5..fda0d129e1 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -114,9 +114,9 @@
             />
             <!--eslint-enable-->
           </template>
-          <template #contextMenu="{ resource, isOpen }">
+          <template #contextMenu="{ resource }">
             <context-actions
-              v-if="isOpen && isResourceInSelection(resource)"
+              v-if="isResourceInSelection(resource)"
               :action-options="{ space: getMatchingSpace(resource), resources: selectedResources }"
             />
           </template>
diff --git a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
index b00882487d..981f29b6d8 100644
--- a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
+++ b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
@@ -30,9 +30,9 @@
       @item-visible="loadPreview({ space: getMatchingSpace($event), resource: $event })"
       @sort="sortHandler"
     >
-      <template #contextMenu="{ resource, isOpen }">
+      <template #contextMenu="{ resource }">
         <context-actions
-          v-if="isOpen && isResourceInSelection(resource)"
+          v-if="isResourceInSelection(resource)"
           :action-options="{ space: getMatchingSpace(resource), resources: selectedResources }"
         />
       </template>
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index 6651e82973..da5f6f3092 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -27,9 +27,9 @@
           <template #quickActions="props">
             <quick-actions class="hidden sm:block" :item="props.resource" />
           </template>
-          <template #contextMenu="{ resource, isOpen }">
+          <template #contextMenu="{ resource }">
             <context-actions
-              v-if="isOpen && isResourceInSelection(resource)"
+              v-if="isResourceInSelection(resource)"
               :action-options="{ space: getMatchingSpace(resource), resources: selectedResources }"
             />
           </template>
diff --git a/packages/web-app-files/src/views/shares/SharedViaLink.vue b/packages/web-app-files/src/views/shares/SharedViaLink.vue
index e358600ebc..40718eab47 100644
--- a/packages/web-app-files/src/views/shares/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/shares/SharedViaLink.vue
@@ -31,9 +31,9 @@
           @item-visible="loadPreview({ space: getMatchingSpace($event), resource: $event })"
           @sort="handleSort"
         >
-          <template #contextMenu="{ resource, isOpen }">
+          <template #contextMenu="{ resource }">
             <context-actions
-              v-if="isOpen && isResourceInSelection(resource)"
+              v-if="isResourceInSelection(resource)"
               :action-options="{ space: getMatchingSpace(resource), resources: selectedResources }"
             />
           </template>
diff --git a/packages/web-app-files/src/views/shares/SharedWithOthers.vue b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
index 6aa927823c..dd500c65ce 100644
--- a/packages/web-app-files/src/views/shares/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
@@ -54,9 +54,9 @@
           @item-visible="loadPreview({ space: getMatchingSpace($event), resource: $event })"
           @sort="handleSort"
         >
-          <template #contextMenu="{ resource, isOpen }">
+          <template #contextMenu="{ resource }">
             <context-actions
-              v-if="isOpen && isResourceInSelection(resource)"
+              v-if="isResourceInSelection(resource)"
               :action-options="{ space: getMatchingSpace(resource), resources: selectedResources }"
             />
           </template>
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 041c2cbd6b..09f5298953 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -78,9 +78,9 @@
               @item-visible="loadPreview({ space, resource: $event })"
               @sort="handleSort"
             >
-              <template #contextMenu="{ resource, isOpen }">
+              <template #contextMenu="{ resource }">
                 <context-actions
-                  v-if="isOpen && isResourceInSelection(resource)"
+                  v-if="isResourceInSelection(resource)"
                   :action-options="{ space, resources: selectedResources }"
                 />
               </template>
diff --git a/packages/web-app-files/src/views/spaces/GenericTrash.vue b/packages/web-app-files/src/views/spaces/GenericTrash.vue
index 86359e980f..572ce2c46c 100644
--- a/packages/web-app-files/src/views/spaces/GenericTrash.vue
+++ b/packages/web-app-files/src/views/spaces/GenericTrash.vue
@@ -56,9 +56,9 @@
           :view-size="viewSize"
           @sort="handleSort"
         >
-          <template #contextMenu="{ resource, isOpen }">
+          <template #contextMenu="{ resource }">
             <context-actions
-              v-if="isOpen && isResourceInSelection(resource)"
+              v-if="isResourceInSelection(resource)"
               :action-options="{ space, resources: selectedResources }"
             />
           </template>
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index 8571ac1586..a868d6ae89 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -106,9 +106,9 @@
                 <oc-icon name="group" fill-type="line" />
               </oc-button>
             </template>
-            <template #contextMenu="{ resource, isOpen }">
+            <template #contextMenu="{ resource }">
               <space-context-actions
-                v-if="isOpen && isResourceInSelection(resource)"
+                v-if="isResourceInSelection(resource)"
                 :loading="resource.graphPermissions === undefined"
                 :action-options="{ resources: [resource] as SpaceResource[] }"
               />
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index 83e26cca46..4c80babf03 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -47,9 +47,8 @@
             @sort="handleSort"
             @item-visible="loadPreview({ space: getMatchingSpace($event), resource: $event })"
           >
-            <template #contextMenu="{ resource, isOpen }">
+            <template #contextMenu="{ resource }">
               <trash-context-actions
-                v-if="isOpen"
                 :loading="resource.graphPermissions === undefined"
                 :action-options="{ resources: [resource] as SpaceResource[] }"
               />
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/EditDropdown.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/EditDropdown.spec.ts
index 63556bce39..f3c2b0a898 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/EditDropdown.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/EditDropdown.spec.ts
@@ -78,9 +78,10 @@ function getWrapper(props: PartialComponentProps<typeof EditDropdown> = {}) {
         ...props
       },
       global: {
+        renderStubDefaultSlot: true,
         plugins: [...defaultPlugins()],
         provide: { resource: mock<Resource>() },
-        stubs: { OcDrop: false, OcCard: false, OcList: false, ContextMenuItem: false }
+        stubs: { OcCard: false, OcList: false, ContextMenuItem: false }
       }
     })
   }
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/RoleDropdown.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/RoleDropdown.spec.ts
index 9b4a08f242..53c779b180 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/RoleDropdown.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/RoleDropdown.spec.ts
@@ -42,7 +42,7 @@ describe('RoleDropdown', () => {
     expect(wrapper.find(selectors.recipientRoleBtn).exists()).toBeFalsy()
   })
   it('emits "optionChange"-event on role click', async () => {
-    const { wrapper } = getWrapper()
+    const { wrapper } = getWrapper({ mountType: shallowMount })
     ;(wrapper.vm.$refs.rolesDrop as any).tippy = { hide: vi.fn() }
     await wrapper.find(selectors.roleButton).trigger('click')
     expect(wrapper.emitted('optionChange')).toBeTruthy()
diff --git a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
index b1fab78079..0f10ddc357 100644
--- a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
@@ -19,11 +19,7 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
         </button>
         <div id="space-context-drop" class="oc-drop shadow-md/20 rounded-sm" options="[object Object]">
-          <div class="oc-card">
-            <!--v-if-->
-            <div class="oc-card-body p-2"></div>
-            <!--v-if-->
-          </div>
+          <!--v-if-->
         </div>
       </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
@@ -64,11 +60,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
         </button>
         <div id="space-context-drop" class="oc-drop shadow-md/20 rounded-sm" options="[object Object]">
-          <div class="oc-card">
-            <!--v-if-->
-            <div class="oc-card-body p-2"></div>
-            <!--v-if-->
-          </div>
+          <!--v-if-->
         </div>
       </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
@@ -111,11 +103,7 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
         </button>
         <div id="space-context-drop" class="oc-drop shadow-md/20 rounded-sm" options="[object Object]">
-          <div class="oc-card">
-            <!--v-if-->
-            <div class="oc-card-body p-2"></div>
-            <!--v-if-->
-          </div>
+          <!--v-if-->
         </div>
       </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
diff --git a/packages/web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue b/packages/web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue
index 947ea67a12..18eaa9814e 100644
--- a/packages/web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue
+++ b/packages/web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue
@@ -23,47 +23,31 @@
       mode="click"
       padding-size="small"
       close-on-click
-      @show-drop="isOpen = true"
-      @hide-drop="isOpen = false"
     >
-      <slot name="contextMenu" :item="item" :is-open="isOpen" />
+      <slot name="contextMenu" :item="item" />
     </oc-drop>
   </oc-button>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+<script setup lang="ts">
+import { computed } from 'vue'
 import { extractDomSelector, Resource } from '@opencloud-eu/web-client'
 import { useGettext } from 'vue3-gettext'
 
-export default defineComponent({
-  name: 'ContextMenuQuickAction',
-  props: {
-    item: {
-      type: Object,
-      required: true
-    },
-    resourceDomSelector: {
-      type: Function,
-      required: false,
-      default: (resource: Resource) => extractDomSelector(resource.id)
-    },
-    title: {
-      type: String,
-      required: false,
-      default: ''
-    }
-  },
-  emits: ['quickActionClicked'],
-  setup() {
-    const { $gettext } = useGettext()
-    const contextMenuLabel = computed(() => $gettext('Show context menu'))
-    const isOpen = ref(false)
+const {
+  item,
+  resourceDomSelector = (resource: Resource) => extractDomSelector(resource.id),
+  title = ''
+} = defineProps<{
+  item: Resource
+  resourceDomSelector?: (resource: Resource) => string
+  title?: string
+}>()
 
-    return {
-      contextMenuLabel,
-      isOpen
-    }
-  }
-})
+defineEmits<{
+  (e: 'quickActionClicked', payload: { event: MouseEvent; dropdown: unknown }): void
+}>()
+
+const { $gettext } = useGettext()
+const contextMenuLabel = computed(() => $gettext('Show context menu'))
 </script>
diff --git a/packages/web-pkg/src/components/CreateShortcutModal.vue b/packages/web-pkg/src/components/CreateShortcutModal.vue
index e54b44ccf6..0810f06d01 100644
--- a/packages/web-pkg/src/components/CreateShortcutModal.vue
+++ b/packages/web-pkg/src/components/CreateShortcutModal.vue
@@ -426,14 +426,15 @@ export default defineComponent({
       }
 
       const elements = unref(dropRef).$el.querySelectorAll('.selectable-item')
-
-      unref(dropRef).$el.scrollTo(
-        0,
-        unref(activeDropItemIndex) === null
-          ? 0
-          : elements[unref(activeDropItemIndex)].getBoundingClientRect().y -
-              elements[unref(activeDropItemIndex)].getBoundingClientRect().height
-      )
+      if (elements[unref(activeDropItemIndex)]) {
+        unref(dropRef).$el.scrollTo(
+          0,
+          unref(activeDropItemIndex) === null
+            ? 0
+            : elements[unref(activeDropItemIndex)].getBoundingClientRect().y -
+                elements[unref(activeDropItemIndex)].getBoundingClientRect().height
+        )
+      }
     })
 
     expose({ onConfirm })
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index 527cfd2e2f..507b55769c 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -252,8 +252,8 @@
           class="resource-table-btn-action-dropdown"
           @quick-action-clicked="showContextMenuOnBtnClick($event, item)"
         >
-          <template #contextMenu="{ isOpen }">
-            <slot name="contextMenu" :resource="item" :is-open="isOpen" />
+          <template #contextMenu>
+            <slot name="contextMenu" :resource="item" />
           </template>
         </context-menu-quick-action>
       </div>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
index 9501e76f75..0e524279a2 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -114,8 +114,8 @@
               class="resource-tiles-btn-action-dropdown"
               @quick-action-clicked="showContextMenuOnBtnClick($event, resource, resource.id)"
             >
-              <template #contextMenu="{ isOpen }">
-                <slot name="contextMenu" :resource="resource" :is-open="isOpen" />
+              <template #contextMenu>
+                <slot name="contextMenu" :resource="resource" />
               </template>
             </context-menu-quick-action>
           </template>
@@ -235,7 +235,7 @@ const emit = defineEmits<{
 defineSlots<{
   image?: (props: { resource: Resource }) => unknown
   actions?: (props: { resource: Resource }) => unknown
-  contextMenu?: (props: { resource: Resource; isOpen: boolean }) => unknown
+  contextMenu?: (props: { resource: Resource }) => unknown
   footer?: () => unknown
   additionalResourceContent?: (props: { resource: Resource }) => unknown
 }>()
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/ActionMenuDropItem.spec.ts b/packages/web-pkg/tests/unit/components/ContextActions/ActionMenuDropItem.spec.ts
index 23677ed4c6..8d5f9ad907 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/ActionMenuDropItem.spec.ts
+++ b/packages/web-pkg/tests/unit/components/ContextActions/ActionMenuDropItem.spec.ts
@@ -28,7 +28,9 @@ function getWrapper(menuSectionDrop: MenuSectionDrop) {
         appearance: 'outline'
       },
       global: {
-        plugins: [...defaultPlugins()]
+        plugins: [...defaultPlugins()],
+        renderStubDefaultSlot: true,
+        stubs: { OcDrop: true }
       }
     })
   }
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/ContextMenuQuickAction.spec.ts b/packages/web-pkg/tests/unit/components/ContextActions/ContextMenuQuickAction.spec.ts
index e442528913..bdf08b45c3 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/ContextMenuQuickAction.spec.ts
+++ b/packages/web-pkg/tests/unit/components/ContextActions/ContextMenuQuickAction.spec.ts
@@ -1,5 +1,7 @@
+import { mock } from 'vitest-mock-extended'
 import ContextMenuQuickAction from '../../../../src/components/ContextActions/ContextMenuQuickAction.vue'
-import { defaultPlugins, mount } from '@opencloud-eu/web-test-helpers'
+import { defaultPlugins, mount, PartialComponentProps } from '@opencloud-eu/web-test-helpers'
+import { Resource } from '../../../../../web-client/src/helpers'
 
 describe('ContextMenuQuickAction component', () => {
   it('renders component', () => {
@@ -13,7 +15,9 @@ describe('ContextMenuQuickAction component', () => {
   })
 })
 
-function getWrapper({ item = { id: '1' } } = {}) {
+function getWrapper({
+  item = mock<Resource>({ id: '1' })
+}: PartialComponentProps<typeof ContextMenuQuickAction> = {}) {
   return {
     wrapper: mount(ContextMenuQuickAction, {
       props: {
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
index 749e308bba..a3e4eeac7e 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ActionMenuDropItem.spec.ts.snap
@@ -21,27 +21,21 @@ exports[`ActionMenuDropItem component > renders drop menu with actions 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
   </button>
-  <div id="oc-files-context-actions-actions-drop-1" class="oc-drop shadow-md/20 rounded-sm w-3xs oc-files-context-action-drop">
-    <div class="oc-card">
-      <!--v-if-->
-      <div class="oc-card-body p-2">
-        <ul class="oc-list">
-          <li><button type="button" aria-label="Copy" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
-              <!--v-if-->
-              <!-- @slot Content of the button -->
-              <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Copy</span></span>
-              <!--v-if-->
-            </button></li>
-          <li><button type="button" aria-label="Paste" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
-              <!--v-if-->
-              <!-- @slot Content of the button -->
-              <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Paste</span></span>
-              <!--v-if-->
-            </button></li>
-        </ul>
-      </div>
-      <!--v-if-->
-    </div>
-  </div>
+  <oc-drop-stub title="Actions" closeonclick="true" dropid="oc-files-context-actions-actions-drop-1" isnestedelement="true" mode="hover" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="auto-start" toggle="#oc-files-context-actions-actions-toggle-2" enforcedroponmobile="false" class="w-3xs oc-files-context-action-drop">
+    <ul class="oc-list">
+      <li><button type="button" aria-label="Copy" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+          <!--v-if-->
+          <!-- @slot Content of the button -->
+          <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Copy</span></span>
+          <!--v-if-->
+        </button></li>
+      <li><button type="button" aria-label="Paste" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
+          <!--v-if-->
+          <!-- @slot Content of the button -->
+          <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Paste</span></span>
+          <!--v-if-->
+        </button></li>
+    </ul>
+  </oc-drop-stub>
 </li>"
 `;
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
index af6b408e58..7d4cc0ffe7 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextActionMenu.spec.ts.snap
@@ -31,26 +31,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
       </button>
       <div id="oc-files-context-actions-apps-drop-1" class="oc-drop shadow-md/20 rounded-sm w-3xs oc-files-context-action-drop">
-        <div class="oc-card">
-          <!--v-if-->
-          <div class="oc-card-body p-2">
-            <ul class="oc-list">
-              <li><button type="button" aria-label="Preview" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
-                  <!--v-if-->
-                  <!-- @slot Content of the button -->
-                  <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Preview</span></span>
-                  <!--v-if-->
-                </button></li>
-              <li><button type="button" aria-label="PDF Viewer" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
-                  <!--v-if-->
-                  <!-- @slot Content of the button -->
-                  <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>PDF Viewer</span></span>
-                  <!--v-if-->
-                </button></li>
-            </ul>
-          </div>
-          <!--v-if-->
-        </div>
+        <!--v-if-->
       </div>
     </li>
   </ul>
@@ -82,26 +63,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
       </button>
       <div id="oc-files-context-actions-actions-drop-3" class="oc-drop shadow-md/20 rounded-sm w-3xs oc-files-context-action-drop">
-        <div class="oc-card">
-          <!--v-if-->
-          <div class="oc-card-body p-2">
-            <ul class="oc-list">
-              <li><button type="button" aria-label="Copy" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
-                  <!--v-if-->
-                  <!-- @slot Content of the button -->
-                  <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Copy</span></span>
-                  <!--v-if-->
-                </button></li>
-              <li><button type="button" aria-label="Paste" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
-                  <!--v-if-->
-                  <!-- @slot Content of the button -->
-                  <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Paste</span></span>
-                  <!--v-if-->
-                </button></li>
-            </ul>
-          </div>
-          <!--v-if-->
-        </div>
+        <!--v-if-->
       </div>
     </li>
     <li class="context-menu px-2"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full flex justify-between" id="oc-files-context-actions-delete-toggle-6" aria-expanded="false">
@@ -125,26 +87,7 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
       </button>
       <div id="oc-files-context-actions-delete-drop-5" class="oc-drop shadow-md/20 rounded-sm w-3xs oc-files-context-action-drop">
-        <div class="oc-card">
-          <!--v-if-->
-          <div class="oc-card-body p-2">
-            <ul class="oc-list">
-              <li><button type="button" aria-label="Delete" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
-                  <!--v-if-->
-                  <!-- @slot Content of the button -->
-                  <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Delete</span></span>
-                  <!--v-if-->
-                </button></li>
-              <li><button type="button" aria-label="Delete permanently" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default action-menu-item align-middle w-full" data-testid="action-handler">
-                  <!--v-if-->
-                  <!-- @slot Content of the button -->
-                  <!--v-if--> <span class="oc-files-context-action-label flex flex-col" data-testid="action-label"><span>Delete permanently</span></span>
-                  <!--v-if-->
-                </button></li>
-            </ul>
-          </div>
-          <!--v-if-->
-        </div>
+        <!--v-if-->
       </div>
     </li>
   </ul>
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
index 11e6187afb..93112c2de6 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/ContextActions/__snapshots__/ContextMenuQuickAction.spec.ts.snap
@@ -1,7 +1,90 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ContextMenuQuickAction component > renders component 1`] = `
-"<button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1" id="context-menu-trigger-1">
+"<button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1" id="context-menu-trigger-1" data-test-context-menu-resource-name="function(...args) {
+		registerCalls(args, state, prototypeState);
+		registerInvocationOrder(invocationCallCounter++, state, prototypeState);
+		const result = {
+			type: &quot;incomplete&quot;,
+			value: undefined
+		};
+		const settledResult = {
+			type: &quot;incomplete&quot;,
+			value: undefined
+		};
+		registerResult(result, state, prototypeState);
+		registerSettledResult(settledResult, state, prototypeState);
+		const context = new.target ? undefined : this;
+		const [instanceIndex, instancePrototypeIndex] = registerInstance(context, state, prototypeState);
+		const [contextIndex, contextPrototypeIndex] = registerContext(context, state, prototypeState);
+		const implementation = config.onceMockImplementations.shift() || config.mockImplementation || (prototypeConfig === null || prototypeConfig === void 0 ? void 0 : prototypeConfig.onceMockImplementations.shift()) || (prototypeConfig === null || prototypeConfig === void 0 ? void 0 : prototypeConfig.mockImplementation) || original || function() {};
+		let returnValue;
+		let thrownValue;
+		let didThrow = false;
+		try {
+			if (new.target) {
+				returnValue = Reflect.construct(implementation, args, new.target);
+				// jest calls this before the implementation, but we have to resolve this _after_
+				// because we cannot do it before the \`Reflect.construct\` called the custom implementation.
+				// fortunetly, the constructor is always an empty functon because \`prototypeMethods\`
+				// are only used by the automocker, so this doesn't matter
+				for (const prop of prototypeMembers) {
+					const prototypeMock = returnValue[prop];
+					const isMock = isMockFunction(prototypeMock);
+					const prototypeState = isMock ? prototypeMock.mock : undefined;
+					const prototypeConfig = isMock ? MOCK_CONFIGS.get(prototypeMock) : undefined;
+					returnValue[prop] = createMockInstance({
+						originalImplementation: keepMembersImplementation ? prototypeConfig === null || prototypeConfig === void 0 ? void 0 : prototypeConfig.mockOriginal : undefined,
+						prototypeState,
+						prototypeConfig,
+						keepMembersImplementation
+					});
+				}
+			} else {
+				returnValue = implementation.apply(this, args);
+			}
+		} catch (error) {
+			thrownValue = error;
+			didThrow = true;
+			if (error instanceof TypeError &amp;&amp; error.message.includes(&quot;is not a constructor&quot;)) {
+				console.warn(\`[vitest] The \${namedObject[name].getMockName()} mock did not use 'function' or 'class' in its implementation, see https://vitest.dev/api/vi#vi-spyon for examples.\`);
+			}
+			throw error;
+		} finally {
+			if (didThrow) {
+				result.type = &quot;throw&quot;;
+				result.value = thrownValue;
+				settledResult.type = &quot;rejected&quot;;
+				settledResult.value = thrownValue;
+			} else {
+				result.type = &quot;return&quot;;
+				result.value = returnValue;
+				if (new.target) {
+					state.contexts[contextIndex - 1] = returnValue;
+					state.instances[instanceIndex - 1] = returnValue;
+					if (contextPrototypeIndex != null &amp;&amp; prototypeState) {
+						prototypeState.contexts[contextPrototypeIndex - 1] = returnValue;
+					}
+					if (instancePrototypeIndex != null &amp;&amp; prototypeState) {
+						prototypeState.instances[instancePrototypeIndex - 1] = returnValue;
+					}
+				}
+				if (returnValue instanceof Promise) {
+					returnValue.then((settledValue) => {
+						settledResult.type = &quot;fulfilled&quot;;
+						settledResult.value = settledValue;
+					}, (rejectedValue) => {
+						settledResult.type = &quot;rejected&quot;;
+						settledResult.value = rejectedValue;
+					});
+				} else {
+					settledResult.type = &quot;fulfilled&quot;;
+					settledResult.value = returnValue;
+				}
+			}
+		}
+		return returnValue;
+	}">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -13,11 +96,7 @@ exports[`ContextMenuQuickAction component > renders component 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
   <div id="context-menu-drop-1" class="oc-drop shadow-md/20 rounded-sm">
-    <div class="oc-card">
-      <!--v-if-->
-      <div class="oc-card-body p-2"></div>
-      <!--v-if-->
-    </div>
+    <!--v-if-->
   </div>
 </button>"
 `;
diff --git a/packages/web-pkg/tests/unit/components/CreateLinkModal.spec.ts b/packages/web-pkg/tests/unit/components/CreateLinkModal.spec.ts
index 2733394103..49bea6423b 100644
--- a/packages/web-pkg/tests/unit/components/CreateLinkModal.spec.ts
+++ b/packages/web-pkg/tests/unit/components/CreateLinkModal.spec.ts
@@ -221,7 +221,8 @@ function getWrapper({
         ],
         mocks,
         provide: mocks,
-        stubs: { OcTextInput: true, OcDatepicker: true, OcButton: true }
+        stubs: { OcTextInput: true, OcDatepicker: true, OcButton: true, OcDrop: true },
+        renderStubDefaultSlot: true
       }
     })
   }
diff --git a/packages/web-pkg/tests/unit/components/FilesList/ResourceTiles.spec.ts b/packages/web-pkg/tests/unit/components/FilesList/ResourceTiles.spec.ts
index d09e083f62..ab5f4255ce 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/ResourceTiles.spec.ts
+++ b/packages/web-pkg/tests/unit/components/FilesList/ResourceTiles.spec.ts
@@ -179,7 +179,7 @@ describe('ResourceTiles component', () => {
       expect(wrapper.find('.oc-tiles-sort .oc-filter-chip-label').text()).toEqual(sortField.label)
     })
     it('emits the "sort"-event', async () => {
-      const { wrapper } = getWrapper({ props: { sortFields } })
+      const { wrapper } = getWrapper({ props: { sortFields }, stubs: { OcDrop: true } })
       const filterChip = wrapper.findComponent<typeof OcFilterChip>({ name: 'oc-filter-chip' })
       await filterChip.trigger('click')
       const sortItem = filterChip.findAll('.oc-tiles-sort-filter-chip-item')
@@ -309,7 +309,8 @@ describe('ResourceTiles component', () => {
           ],
           mocks: mocks,
           provide: mocks,
-          stubs
+          stubs,
+          renderStubDefaultSlot: true
         }
       })
     }
diff --git a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
index 8d9f99040e..cdb55b73d9 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap
@@ -49,11 +49,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
                   <div id="context-menu-drop-1" class="oc-drop shadow-md/20 rounded-sm">
-                    <div class="oc-card">
-                      <!--v-if-->
-                      <div class="oc-card-body p-2"></div>
-                      <!--v-if-->
-                    </div>
+                    <!--v-if-->
                   </div>
                 </button>
               </div>
@@ -96,11 +92,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
                   <div id="context-menu-drop-2" class="oc-drop shadow-md/20 rounded-sm">
-                    <div class="oc-card">
-                      <!--v-if-->
-                      <div class="oc-card-body p-2"></div>
-                      <!--v-if-->
-                    </div>
+                    <!--v-if-->
                   </div>
                 </button>
               </div>
diff --git a/packages/web-pkg/tests/unit/components/Filters/DateFilter.spec.ts b/packages/web-pkg/tests/unit/components/Filters/DateFilter.spec.ts
index d9085231f5..6482912a6e 100644
--- a/packages/web-pkg/tests/unit/components/Filters/DateFilter.spec.ts
+++ b/packages/web-pkg/tests/unit/components/Filters/DateFilter.spec.ts
@@ -7,6 +7,7 @@ import {
 } from '@opencloud-eu/web-test-helpers'
 import { queryItemAsString } from '../../../../src/composables/appDefaults'
 import { DateTime } from 'luxon'
+import { ocDropStub } from '@opencloud-eu/web-test-helpers/src/mocks/ocDropStub'
 
 vi.mock('../../../../src/composables/appDefaults')
 
@@ -145,10 +146,14 @@ function getWrapper({
         }
       },
       global: {
+        renderStubDefaultSlot: true,
         plugins: [...defaultPlugins()],
         mocks,
         provide: mocks,
-        stubs: { OcCheckbox: true }
+        stubs: {
+          OcCheckbox: true,
+          OcDrop: ocDropStub
+        }
       }
     })
   }
diff --git a/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap b/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
index be44385d38..2f56d17043 100644
--- a/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/Filters/__snapshots__/DateFilter.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`DateFilter > can use a custom attribute as display name 1`] = `
 "<div data-v-e73bd97a="" class="date-filter flex overflow-hidden [&amp;_label]:text-sm date-filter-users">
-  <div data-v-e73bd97a="" class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1 focus:z-90" id="oc-filter-chip-5">
+  <div data-v-e73bd97a="" class="oc-filter-chip flex"><button type="button" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-filter-chip-button oc-pill py-1 px-2 text-xs rounded-full h-[26px] max-w-40 gap-1 focus:z-90" id="oc-filter-chip-4">
       <!--v-if-->
       <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4 transform-[scale(0)] ease-out w-0 transition-all duration-250"><svg data-testid="inline-svg-stub" src="icons/check-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -23,46 +23,43 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
     </button>
-    <div id="oc-drop-6" class="oc-drop shadow-md/20 rounded-sm oc-filter-chip-drop">
-      <div class="oc-card">
-        <!--v-if-->
-        <div class="oc-card-body p-2">
-          <ul data-v-e73bd97a="" class="oc-list">
-            <li data-v-e73bd97a="" class="my-1 first:mt-0 last:mb-0"><button data-v-e73bd97a="" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="today">
-                <!--v-if-->
-                <!-- @slot Content of the button -->
-                <div data-v-e73bd97a="" class="flex items-center truncate">
-                  <div data-v-e73bd97a="" class="truncate ml-2">today</div>
-                </div>
-                <div data-v-e73bd97a="" class="flex">
-                  <!--v-if-->
-                </div>
-              </button></li>
-            <li data-v-e73bd97a="" class="my-1 first:mt-0 last:mb-0"><button data-v-e73bd97a="" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="yesterday">
-                <!--v-if-->
-                <!-- @slot Content of the button -->
-                <div data-v-e73bd97a="" class="flex items-center truncate">
-                  <div data-v-e73bd97a="" class="truncate ml-2">yesterday</div>
-                </div>
-                <div data-v-e73bd97a="" class="flex">
-                  <!--v-if-->
-                </div>
-              </button></li>
-            <li data-v-e73bd97a="" class="my-1"><button data-v-e73bd97a="" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="custom-date-range">
-                <!--v-if-->
-                <!-- @slot Content of the button -->
-                <div data-v-e73bd97a="" class="flex items-center truncate">
-                  <div data-v-e73bd97a="" class="truncate ml-2"><span data-v-e73bd97a="">Custom date range</span></div>
-                </div>
-                <div data-v-e73bd97a="" class="flex">
-                  <!--v-if-->
-                </div>
-              </button></li>
-          </ul>
-          <div data-v-e73bd97a="" class="date-filter-range-panel absolute top-0 p-2 bg-role-surface transform-[translateX(100%)] invisible">
-            <div data-v-e73bd97a="" class="flex items-center justify-between mb-4"><button data-v-e73bd97a="" type="button" aria-label="Go back to filter options" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-range-panel-back">
-                <!--v-if-->
-                <!-- @slot Content of the button --> <span data-v-e73bd97a="" class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
+    <div toggle="#oc-filter-chip-4" title="Users" class="oc-filter-chip-drop" mode="click" padding-size="small" close-on-click="false">
+      <ul data-v-e73bd97a="" class="oc-list">
+        <li data-v-e73bd97a="" class="my-1 first:mt-0 last:mb-0"><button data-v-e73bd97a="" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="today">
+            <!--v-if-->
+            <!-- @slot Content of the button -->
+            <div data-v-e73bd97a="" class="flex items-center truncate">
+              <div data-v-e73bd97a="" class="truncate ml-2">today</div>
+            </div>
+            <div data-v-e73bd97a="" class="flex">
+              <!--v-if-->
+            </div>
+          </button></li>
+        <li data-v-e73bd97a="" class="my-1 first:mt-0 last:mb-0"><button data-v-e73bd97a="" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="yesterday">
+            <!--v-if-->
+            <!-- @slot Content of the button -->
+            <div data-v-e73bd97a="" class="flex items-center truncate">
+              <div data-v-e73bd97a="" class="truncate ml-2">yesterday</div>
+            </div>
+            <div data-v-e73bd97a="" class="flex">
+              <!--v-if-->
+            </div>
+          </button></li>
+        <li data-v-e73bd97a="" class="my-1"><button data-v-e73bd97a="" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="custom-date-range">
+            <!--v-if-->
+            <!-- @slot Content of the button -->
+            <div data-v-e73bd97a="" class="flex items-center truncate">
+              <div data-v-e73bd97a="" class="truncate ml-2"><span data-v-e73bd97a="">Custom date range</span></div>
+            </div>
+            <div data-v-e73bd97a="" class="flex">
+              <!--v-if-->
+            </div>
+          </button></li>
+      </ul>
+      <div data-v-e73bd97a="" class="date-filter-range-panel absolute top-0 p-2 bg-role-surface transform-[translateX(100%)] invisible">
+        <div data-v-e73bd97a="" class="flex items-center justify-between mb-4"><button data-v-e73bd97a="" type="button" aria-label="Go back to filter options" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-range-panel-back">
+            <!--v-if-->
+            <!-- @slot Content of the button --> <span data-v-e73bd97a="" class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -71,9 +68,9 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-              </button> <span data-v-e73bd97a="">Custom date range</span> <button data-v-e73bd97a="" type="button" aria-label="Close filter" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-range-panel-close">
-                <!--v-if-->
-                <!-- @slot Content of the button --> <span data-v-e73bd97a="" class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
+          </button> <span data-v-e73bd97a="">Custom date range</span> <button data-v-e73bd97a="" type="button" aria-label="Close filter" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-range-panel-close">
+            <!--v-if-->
+            <!-- @slot Content of the button --> <span data-v-e73bd97a="" class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -82,40 +79,37 @@ exports[`DateFilter > can use a custom attribute as display name 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-              </button></div>
-            <div data-v-e73bd97a="" class="mt-2">
-              <div data-v-e73bd97a="" class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-7">From
-                  <!--v-if-->
-                </label>
-                <div class="relative">
-                  <!--v-if--> <input id="oc-textinput-7" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
-                  <!--v-if-->
-                </div>
-                <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
-                  <!--v-if-->
-                </div>
-                <!--v-if-->
-              </div>
-              <div data-v-e73bd97a="" class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-8">To
-                  <!--v-if-->
-                </label>
-                <div class="relative">
-                  <!--v-if--> <input id="oc-textinput-8" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
-                  <!--v-if-->
-                </div>
-                <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
-                  <!--v-if-->
-                </div>
-                <!--v-if-->
-              </div>
-            </div>
-            <div data-v-e73bd97a="" class="date-filter-apply-btn text-end"><button data-v-e73bd97a="" type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
-                <!--v-if-->
-                <!-- @slot Content of the button --> Apply
-              </button></div>
+          </button></div>
+        <div data-v-e73bd97a="" class="mt-2">
+          <div data-v-e73bd97a="" class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-5">From
+              <!--v-if-->
+            </label>
+            <div class="relative">
+              <!--v-if--> <input id="oc-textinput-5" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
+              <!--v-if-->
+            </div>
+            <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+          </div>
+          <div data-v-e73bd97a="" class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-6">To
+              <!--v-if-->
+            </label>
+            <div class="relative">
+              <!--v-if--> <input id="oc-textinput-6" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
+              <!--v-if-->
+            </div>
+            <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
+              <!--v-if-->
+            </div>
+            <!--v-if-->
           </div>
         </div>
-        <!--v-if-->
+        <div data-v-e73bd97a="" class="date-filter-apply-btn text-end"><button data-v-e73bd97a="" type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
+            <!--v-if-->
+            <!-- @slot Content of the button --> Apply
+          </button></div>
       </div>
     </div>
     <!--v-if-->
@@ -146,46 +140,43 @@ exports[`DateFilter > renders all items 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
     </button>
-    <div id="oc-drop-2" class="oc-drop shadow-md/20 rounded-sm oc-filter-chip-drop">
-      <div class="oc-card">
-        <!--v-if-->
-        <div class="oc-card-body p-2">
-          <ul data-v-e73bd97a="" class="oc-list">
-            <li data-v-e73bd97a="" class="my-1 first:mt-0 last:mb-0"><button data-v-e73bd97a="" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="today">
-                <!--v-if-->
-                <!-- @slot Content of the button -->
-                <div data-v-e73bd97a="" class="flex items-center truncate">
-                  <div data-v-e73bd97a="" class="truncate ml-2">today</div>
-                </div>
-                <div data-v-e73bd97a="" class="flex">
-                  <!--v-if-->
-                </div>
-              </button></li>
-            <li data-v-e73bd97a="" class="my-1 first:mt-0 last:mb-0"><button data-v-e73bd97a="" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="yesterday">
-                <!--v-if-->
-                <!-- @slot Content of the button -->
-                <div data-v-e73bd97a="" class="flex items-center truncate">
-                  <div data-v-e73bd97a="" class="truncate ml-2">yesterday</div>
-                </div>
-                <div data-v-e73bd97a="" class="flex">
-                  <!--v-if-->
-                </div>
-              </button></li>
-            <li data-v-e73bd97a="" class="my-1"><button data-v-e73bd97a="" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="custom-date-range">
-                <!--v-if-->
-                <!-- @slot Content of the button -->
-                <div data-v-e73bd97a="" class="flex items-center truncate">
-                  <div data-v-e73bd97a="" class="truncate ml-2"><span data-v-e73bd97a="">Custom date range</span></div>
-                </div>
-                <div data-v-e73bd97a="" class="flex">
-                  <!--v-if-->
-                </div>
-              </button></li>
-          </ul>
-          <div data-v-e73bd97a="" class="date-filter-range-panel absolute top-0 p-2 bg-role-surface transform-[translateX(100%)] invisible">
-            <div data-v-e73bd97a="" class="flex items-center justify-between mb-4"><button data-v-e73bd97a="" type="button" aria-label="Go back to filter options" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-range-panel-back">
-                <!--v-if-->
-                <!-- @slot Content of the button --> <span data-v-e73bd97a="" class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
+    <div toggle="#oc-filter-chip-1" title="Users" class="oc-filter-chip-drop" mode="click" padding-size="small" close-on-click="false">
+      <ul data-v-e73bd97a="" class="oc-list">
+        <li data-v-e73bd97a="" class="my-1 first:mt-0 last:mb-0"><button data-v-e73bd97a="" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="today">
+            <!--v-if-->
+            <!-- @slot Content of the button -->
+            <div data-v-e73bd97a="" class="flex items-center truncate">
+              <div data-v-e73bd97a="" class="truncate ml-2">today</div>
+            </div>
+            <div data-v-e73bd97a="" class="flex">
+              <!--v-if-->
+            </div>
+          </button></li>
+        <li data-v-e73bd97a="" class="my-1 first:mt-0 last:mb-0"><button data-v-e73bd97a="" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="yesterday">
+            <!--v-if-->
+            <!-- @slot Content of the button -->
+            <div data-v-e73bd97a="" class="flex items-center truncate">
+              <div data-v-e73bd97a="" class="truncate ml-2">yesterday</div>
+            </div>
+            <div data-v-e73bd97a="" class="flex">
+              <!--v-if-->
+            </div>
+          </button></li>
+        <li data-v-e73bd97a="" class="my-1"><button data-v-e73bd97a="" type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-list-item flex justify-between items-center w-full p-1" data-testid="custom-date-range">
+            <!--v-if-->
+            <!-- @slot Content of the button -->
+            <div data-v-e73bd97a="" class="flex items-center truncate">
+              <div data-v-e73bd97a="" class="truncate ml-2"><span data-v-e73bd97a="">Custom date range</span></div>
+            </div>
+            <div data-v-e73bd97a="" class="flex">
+              <!--v-if-->
+            </div>
+          </button></li>
+      </ul>
+      <div data-v-e73bd97a="" class="date-filter-range-panel absolute top-0 p-2 bg-role-surface transform-[translateX(100%)] invisible">
+        <div data-v-e73bd97a="" class="flex items-center justify-between mb-4"><button data-v-e73bd97a="" type="button" aria-label="Go back to filter options" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-range-panel-back">
+            <!--v-if-->
+            <!-- @slot Content of the button --> <span data-v-e73bd97a="" class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5"><svg data-testid="inline-svg-stub" src="icons/arrow-left-s-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -194,9 +185,9 @@ exports[`DateFilter > renders all items 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-              </button> <span data-v-e73bd97a="">Custom date range</span> <button data-v-e73bd97a="" type="button" aria-label="Close filter" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-range-panel-close">
-                <!--v-if-->
-                <!-- @slot Content of the button --> <span data-v-e73bd97a="" class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
+          </button> <span data-v-e73bd97a="">Custom date range</span> <button data-v-e73bd97a="" type="button" aria-label="Close filter" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default date-filter-range-panel-close">
+            <!--v-if-->
+            <!-- @slot Content of the button --> <span data-v-e73bd97a="" class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5"><svg data-testid="inline-svg-stub" src="icons/close-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -205,40 +196,37 @@ exports[`DateFilter > renders all items 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-              </button></div>
-            <div data-v-e73bd97a="" class="mt-2">
-              <div data-v-e73bd97a="" class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-3">From
-                  <!--v-if-->
-                </label>
-                <div class="relative">
-                  <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
-                  <!--v-if-->
-                </div>
-                <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
-                  <!--v-if-->
-                </div>
-                <!--v-if-->
-              </div>
-              <div data-v-e73bd97a="" class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-4">To
-                  <!--v-if-->
-                </label>
-                <div class="relative">
-                  <!--v-if--> <input id="oc-textinput-4" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
-                  <!--v-if-->
-                </div>
-                <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
-                  <!--v-if-->
-                </div>
-                <!--v-if-->
-              </div>
-            </div>
-            <div data-v-e73bd97a="" class="date-filter-apply-btn text-end"><button data-v-e73bd97a="" type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
-                <!--v-if-->
-                <!-- @slot Content of the button --> Apply
-              </button></div>
+          </button></div>
+        <div data-v-e73bd97a="" class="mt-2">
+          <div data-v-e73bd97a="" class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-2">From
+              <!--v-if-->
+            </label>
+            <div class="relative">
+              <!--v-if--> <input id="oc-textinput-2" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
+              <!--v-if-->
+            </div>
+            <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+          </div>
+          <div data-v-e73bd97a="" class="oc-date-picker"><label class="inline-block mb-0.5" for="oc-textinput-3">To
+              <!--v-if-->
+            </label>
+            <div class="relative">
+              <!--v-if--> <input id="oc-textinput-3" aria-invalid="false" class="oc-text-input oc-input" type="date" value="">
+              <!--v-if-->
+            </div>
+            <div class="oc-text-input-message flex align-center text-sm mt-1 min-h-4.5">
+              <!--v-if-->
+            </div>
+            <!--v-if-->
           </div>
         </div>
-        <!--v-if-->
+        <div data-v-e73bd97a="" class="date-filter-apply-btn text-end"><button data-v-e73bd97a="" type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
+            <!--v-if-->
+            <!-- @slot Content of the button --> Apply
+          </button></div>
       </div>
     </div>
     <!--v-if-->
diff --git a/packages/web-pkg/tests/unit/components/ItemFilter.spec.ts b/packages/web-pkg/tests/unit/components/ItemFilter.spec.ts
index b6c93db0b6..3559f186c1 100644
--- a/packages/web-pkg/tests/unit/components/ItemFilter.spec.ts
+++ b/packages/web-pkg/tests/unit/components/ItemFilter.spec.ts
@@ -182,7 +182,8 @@ function getWrapper({
         plugins: [...defaultPlugins()],
         mocks,
         provide: mocks,
-        stubs: { OcCheckbox: true }
+        stubs: { OcCheckbox: true, OcDrop: true },
+        renderStubDefaultSlot: true
       }
     })
   }
diff --git a/packages/web-pkg/tests/unit/components/LinkRoleDropdown.spec.ts b/packages/web-pkg/tests/unit/components/LinkRoleDropdown.spec.ts
index e1c76604da..aa978937eb 100644
--- a/packages/web-pkg/tests/unit/components/LinkRoleDropdown.spec.ts
+++ b/packages/web-pkg/tests/unit/components/LinkRoleDropdown.spec.ts
@@ -64,7 +64,9 @@ function getWrapper({
       global: {
         plugins: [...defaultPlugins()],
         mocks,
-        provide: mocks
+        provide: mocks,
+        stubs: { OcDrop: true },
+        renderStubDefaultSlot: true
       }
     })
   }
diff --git a/packages/web-pkg/tests/unit/components/ViewOptions.spec.ts b/packages/web-pkg/tests/unit/components/ViewOptions.spec.ts
index c76b0ff119..98b0f0782f 100644
--- a/packages/web-pkg/tests/unit/components/ViewOptions.spec.ts
+++ b/packages/web-pkg/tests/unit/components/ViewOptions.spec.ts
@@ -171,8 +171,9 @@ function getWrapper({
       global: {
         mocks,
         provide: mocks,
-        stubs: { OcButton: true, OcPageSize: false, OcSelect: true },
-        plugins: [...defaultPlugins()]
+        stubs: { OcButton: true, OcPageSize: false, OcSelect: true, OcDrop: true },
+        plugins: [...defaultPlugins()],
+        renderStubDefaultSlot: true
       }
     })
   }
diff --git a/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap b/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
index 9e97b1af2f..5f0c5c1fa1 100644
--- a/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
@@ -23,43 +23,37 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
     </button>
-    <div id="oc-drop-4" class="oc-drop shadow-md/20 rounded-sm oc-filter-chip-drop">
-      <div class="oc-card">
-        <!--v-if-->
-        <div class="oc-card-body p-2">
-          <!--v-if-->
-          <div>
-            <ul class="oc-list item-filter-list">
-              <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Albert Einstein">
-                  <!--v-if-->
-                  <!-- @slot Content of the button -->
-                  <div class="flex items-center truncate">
-                    <!--v-if-->
-                    <div></div>
-                    <div class="truncate">Albert Einstein</div>
-                  </div>
-                  <div class="flex">
-                    <!--v-if-->
-                  </div>
-                </button></li>
-              <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Marie Curie">
-                  <!--v-if-->
-                  <!-- @slot Content of the button -->
-                  <div class="flex items-center truncate">
-                    <!--v-if-->
-                    <div></div>
-                    <div class="truncate">Marie Curie</div>
-                  </div>
-                  <div class="flex">
-                    <!--v-if-->
-                  </div>
-                </button></li>
-            </ul>
-          </div>
-        </div>
-        <!--v-if-->
+    <oc-drop-stub title="Users" closeonclick="false" dropid="oc-drop-4" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#oc-filter-chip-3" enforcedroponmobile="false" class="oc-filter-chip-drop">
+      <!--v-if-->
+      <div>
+        <ul class="oc-list item-filter-list">
+          <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Albert Einstein">
+              <!--v-if-->
+              <!-- @slot Content of the button -->
+              <div class="flex items-center truncate">
+                <!--v-if-->
+                <div></div>
+                <div class="truncate">Albert Einstein</div>
+              </div>
+              <div class="flex">
+                <!--v-if-->
+              </div>
+            </button></li>
+          <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Marie Curie">
+              <!--v-if-->
+              <!-- @slot Content of the button -->
+              <div class="flex items-center truncate">
+                <!--v-if-->
+                <div></div>
+                <div class="truncate">Marie Curie</div>
+              </div>
+              <div class="flex">
+                <!--v-if-->
+              </div>
+            </button></li>
+        </ul>
       </div>
-    </div>
+    </oc-drop-stub>
     <!--v-if-->
   </div>
 </div>"
@@ -88,43 +82,37 @@ exports[`ItemFilter > renders all items 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
     </button>
-    <div id="oc-drop-2" class="oc-drop shadow-md/20 rounded-sm oc-filter-chip-drop">
-      <div class="oc-card">
-        <!--v-if-->
-        <div class="oc-card-body p-2">
-          <!--v-if-->
-          <div>
-            <ul class="oc-list item-filter-list">
-              <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Albert Einstein">
-                  <!--v-if-->
-                  <!-- @slot Content of the button -->
-                  <div class="flex items-center truncate">
-                    <!--v-if-->
-                    <div></div>
-                    <div class="truncate">Albert Einstein</div>
-                  </div>
-                  <div class="flex">
-                    <!--v-if-->
-                  </div>
-                </button></li>
-              <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Marie Curie">
-                  <!--v-if-->
-                  <!-- @slot Content of the button -->
-                  <div class="flex items-center truncate">
-                    <!--v-if-->
-                    <div></div>
-                    <div class="truncate">Marie Curie</div>
-                  </div>
-                  <div class="flex">
-                    <!--v-if-->
-                  </div>
-                </button></li>
-            </ul>
-          </div>
-        </div>
-        <!--v-if-->
+    <oc-drop-stub title="Users" closeonclick="false" dropid="oc-drop-2" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#oc-filter-chip-1" enforcedroponmobile="false" class="oc-filter-chip-drop">
+      <!--v-if-->
+      <div>
+        <ul class="oc-list item-filter-list">
+          <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Albert Einstein">
+              <!--v-if-->
+              <!-- @slot Content of the button -->
+              <div class="flex items-center truncate">
+                <!--v-if-->
+                <div></div>
+                <div class="truncate">Albert Einstein</div>
+              </div>
+              <div class="flex">
+                <!--v-if-->
+              </div>
+            </button></li>
+          <li class="my-1"><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-between text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default item-filter-list-item flex items-center w-full justify-between" data-test-value="Marie Curie">
+              <!--v-if-->
+              <!-- @slot Content of the button -->
+              <div class="flex items-center truncate">
+                <!--v-if-->
+                <div></div>
+                <div class="truncate">Marie Curie</div>
+              </div>
+              <div class="flex">
+                <!--v-if-->
+              </div>
+            </button></li>
+        </ul>
       </div>
-    </div>
+    </oc-drop-stub>
     <!--v-if-->
   </div>
 </div>"
diff --git a/packages/web-runtime/tests/unit/components/MobileNav.spec.ts b/packages/web-runtime/tests/unit/components/MobileNav.spec.ts
index 9b54ed5ccb..a89a2d9070 100644
--- a/packages/web-runtime/tests/unit/components/MobileNav.spec.ts
+++ b/packages/web-runtime/tests/unit/components/MobileNav.spec.ts
@@ -39,8 +39,10 @@ function getWrapper() {
         plugins: [...defaultPlugins()],
         mocks,
         stubs: {
-          VersionCheck: true
-        }
+          VersionCheck: true,
+          OcDrop: true
+        },
+        renderStubDefaultSlot: true
       }
     })
   }
diff --git a/packages/web-test-helpers/src/mocks/index.ts b/packages/web-test-helpers/src/mocks/index.ts
index 0becd88927..d27e6f8e5d 100644
--- a/packages/web-test-helpers/src/mocks/index.ts
+++ b/packages/web-test-helpers/src/mocks/index.ts
@@ -1,4 +1,5 @@
 export * from './axios'
+export * from './ocDropStub'
 export * from './defaultComponentMocks'
 export * from './defaultStubs'
 export * from './pinia'
diff --git a/packages/web-test-helpers/src/mocks/ocDropStub.ts b/packages/web-test-helpers/src/mocks/ocDropStub.ts
new file mode 100644
index 0000000000..84da2e91b4
--- /dev/null
+++ b/packages/web-test-helpers/src/mocks/ocDropStub.ts
@@ -0,0 +1,9 @@
+// can be used to stub oc-drop in tests
+export const ocDropStub = {
+  name: 'OcDropStub',
+  template: '<div><slot /></div>',
+  methods: {
+    hide: vi.fn(),
+    show: vi.fn()
+  }
+}