From 26efc20b81a20631038a2fd36cce76cf1c3fe0cd Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Tue, 17 Feb 2026 10:16:12 +0100
Subject: [PATCH 1/6] refactor(design-system): replace tooltip tippy with
 floating-ui

---
 packages/design-system/package.json           |   2 +-
 .../src/components/OcDrop/OcDrop.vue          |   9 +-
 .../design-system/src/directives/OcTooltip.ts | 175 +++++++++++-------
 packages/design-system/src/index.ts           |   1 -
 packages/design-system/src/styles/layers.css  |  13 +-
 .../components/FilesList/ResourceTable.vue    |   2 +-
 pnpm-lock.yaml                                |  58 +++++-
 7 files changed, 174 insertions(+), 86 deletions(-)

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index e2c0d3499d..886b8b0d30 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -101,9 +101,9 @@
   },
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
+    "@floating-ui/dom": "^1.7.5",
     "@popperjs/core": "^2.11.5",
     "@vueuse/core": "^14.0.0",
-    "deepmerge": "^4.2.2",
     "emoji-mart": "^5.6.0",
     "focus-trap": "^7.8.0",
     "focus-trap-vue": "^4.0.1",
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
index cb43cdb7c4..c1219e55fb 100644
--- a/packages/design-system/src/components/OcDrop/OcDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -22,7 +22,6 @@
 <script setup lang="ts">
 import tippy, { hideAll, Props as TippyProps, Instance } from 'tippy.js'
 import { detectOverflow, Modifier } from '@popperjs/core'
-import { destroy, hideOnEsc } from '../../directives/OcTooltip'
 import { getTailwindPaddingClass, SizeType, uniqueId } from '../../helpers'
 import { computed, nextTick, onBeforeUnmount, ref, unref, useTemplateRef, watch } from 'vue'
 import { useIsMobile } from '../../composables'
@@ -208,11 +207,11 @@ watch(
 
 onBeforeUnmount(() => {
   unref(drop)?.removeEventListener('focusout', onFocusOut)
-  destroy(unref(tippyInstance))
+  // destroy(unref(tippyInstance))
 })
 
 const initializeTippy = () => {
-  destroy(unref(tippyInstance))
+  // destroy(unref(tippyInstance))
   const to = target
     ? document.querySelector(target)
     : toggle
@@ -229,7 +228,7 @@ const initializeTippy = () => {
     arrow: false,
     hideOnClick: !isNestedElement,
     interactive: true,
-    plugins: [hideOnEsc],
+    // plugins: [hideOnEsc],
     theme: 'none',
     maxWidth: 416,
     offset,
@@ -294,7 +293,7 @@ watch(
     await nextTick()
     if (unref(useBottomDrawer)) {
       if (unref(tippyInstance)) {
-        destroy(unref(tippyInstance))
+        // destroy(unref(tippyInstance))
       }
       return
     }
diff --git a/packages/design-system/src/directives/OcTooltip.ts b/packages/design-system/src/directives/OcTooltip.ts
index dd0dac2d54..70b0e7cb58 100644
--- a/packages/design-system/src/directives/OcTooltip.ts
+++ b/packages/design-system/src/directives/OcTooltip.ts
@@ -1,94 +1,135 @@
-import tippy, { Instance } from 'tippy.js'
-import merge from 'deepmerge'
-import __logger from '../utils/logger'
-
-export const hideOnEsc = {
-  name: 'hideOnEsc',
-  defaultValue: true,
-  fn({ hide }: Instance) {
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.code === 'Escape') {
-        hide()
-      }
-    }
+import { computePosition, offset, flip, shift, arrow } from '@floating-ui/dom'
+import { DirectiveBinding } from 'vue'
 
-    return {
-      onShow: () => {
-        document.addEventListener('keydown', onKeyDown)
-      },
-      onHide: () => {
-        document.removeEventListener('keydown', onKeyDown)
-      }
-    }
-  }
+interface TooltipData {
+  tooltipEl: HTMLElement | null
+  showHandler: () => void
+  hideHandler: () => void
+  clickHandler: () => void
+  escapeHandler: (e: KeyboardEvent) => void
 }
 
-export const customProps = {
-  name: 'customProps',
-  defaultValue: true,
-  fn(instance: Instance) {
-    return {
-      onCreate() {
-        instance.popper.setAttribute('aria-hidden', 'true')
-        instance.popper.classList.add('oc-tooltip')
-      }
+const tooltipMap = new WeakMap<HTMLElement, TooltipData>()
+
+const showTooltip = async (el: HTMLElement, content: string) => {
+  const data = tooltipMap.get(el)
+  if (!data || data.tooltipEl) {
+    return
+  }
+
+  const tooltipEl = document.createElement('div')
+  tooltipEl.setAttribute('role', 'tooltip')
+  tooltipEl.textContent = content
+
+  const arrowEl = document.createElement('div')
+  arrowEl.classList.add('arrow')
+  tooltipEl.appendChild(arrowEl)
+
+  document.body.appendChild(tooltipEl)
+  data.tooltipEl = tooltipEl
+
+  const { x, y, placement, middlewareData } = await computePosition(el, tooltipEl, {
+    placement: 'top',
+    middleware: [offset(8), flip(), shift({ padding: 5 }), arrow({ element: arrowEl })]
+  })
+
+  // set tooltip position
+  Object.assign(tooltipEl.style, {
+    left: `${x}px`,
+    top: `${y}px`
+  })
+
+  if (middlewareData.arrow) {
+    // set arrow position
+    const { x: arrowX, y: arrowY } = middlewareData.arrow
+    const side = placement.split('-')[0]
+
+    const staticSide: Record<string, string> = {
+      top: 'bottom',
+      right: 'left',
+      bottom: 'top',
+      left: 'right'
     }
+
+    Object.assign(arrowEl.style, {
+      left: arrowX != null ? `${arrowX}px` : '',
+      top: arrowY != null ? `${arrowY}px` : '',
+      [staticSide[side]]: '-4px'
+    })
   }
 }
 
-export const destroy = (_tippy: Instance) => {
-  if (!_tippy) {
+const hideTooltip = (el: HTMLElement) => {
+  const data = tooltipMap.get(el)
+  if (!data || !data.tooltipEl) {
     return
   }
 
-  try {
-    _tippy.destroy()
-  } catch (e) {
-    __logger(e)
-  }
+  data.tooltipEl.remove()
+  data.tooltipEl = null
 }
 
-const initOrUpdate = (
-  el: HTMLElement & { tooltip: Instance },
-  { value = {} }: Record<string, any>
-) => {
-  if (Object.prototype.toString.call(value) !== '[object Object]') {
-    value = { content: value }
+const destroy = (el: HTMLElement) => {
+  const data = tooltipMap.get(el)
+  if (!data) {
+    return
   }
 
-  if ((value.content !== 0 && !value.content) || value.content === '') {
-    destroy(el.tooltip)
-    el.tooltip = null
+  hideTooltip(el)
+
+  el.removeEventListener('mouseenter', data.showHandler)
+  el.removeEventListener('focus', data.showHandler)
+  el.removeEventListener('mouseleave', data.hideHandler)
+  el.removeEventListener('blur', data.hideHandler)
+  el.removeEventListener('click', data.clickHandler)
+  document.removeEventListener('keydown', data.escapeHandler)
+
+  tooltipMap.delete(el)
+}
+
+const initOrUpdate = (el: HTMLElement, { value }: DirectiveBinding) => {
+  if (!value || value === '') {
+    destroy(el)
     return
   }
 
-  const props = merge.all([
-    {
-      ignoreAttributes: true,
-      interactive: false,
-      aria: {
-        content: null,
-        expanded: false
-      }
-    },
-    value
-  ])
-
-  if (!el.tooltip) {
-    el.tooltip = tippy(el, {
-      ...props,
-      zIndex: 10000,
-      plugins: [hideOnEsc, customProps]
-    })
+  const existingTooltip = tooltipMap.get(el)
+  if (existingTooltip && existingTooltip.tooltipEl) {
+    const contentEl = existingTooltip.tooltipEl
+    if (contentEl) {
+      contentEl.textContent = value
+    }
     return
   }
 
-  el.tooltip.setProps(props)
+  const showHandler = () => showTooltip(el, value)
+  const hideHandler = () => hideTooltip(el)
+  const clickHandler = () => hideTooltip(el)
+  const escapeHandler = (e: KeyboardEvent) => {
+    if (e.code === 'Escape') {
+      hideTooltip(el)
+    }
+  }
+
+  tooltipMap.set(el, {
+    tooltipEl: null,
+    showHandler,
+    hideHandler,
+    clickHandler,
+    escapeHandler
+  })
+
+  el.addEventListener('mouseenter', showHandler)
+  el.addEventListener('mouseleave', hideHandler)
+  el.addEventListener('focus', showHandler)
+  el.addEventListener('blur', hideHandler)
+  el.addEventListener('click', clickHandler)
+  document.addEventListener('keydown', escapeHandler)
 }
 
 export default {
   name: 'OcTooltip',
   beforeMount: initOrUpdate,
   updated: initOrUpdate,
-  unmounted: (el: HTMLElement & { tooltip: any }) => destroy(el.tooltip)
+  unmounted: destroy
 }
diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
index 13597b1fc4..fee3ef0dd6 100644
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -10,7 +10,6 @@ import * as directives from './directives'
 // fonts must be imported here to ensure they are included in the build
 import './styles/fonts.scss'
 import './styles/layers.css'
-import 'tippy.js/dist/tippy.css'
 
 let gettextInstance: ReturnType<typeof createGettext> | null = null
 
diff --git a/packages/design-system/src/styles/layers.css b/packages/design-system/src/styles/layers.css
index da0f41f2e9..f9c2bc6d2d 100644
--- a/packages/design-system/src/styles/layers.css
+++ b/packages/design-system/src/styles/layers.css
@@ -80,8 +80,17 @@
     @apply p-2 mb-1;
   }
 
-  .oc-tooltip .tippy-content {
-    @apply text-sm break-all;
+  [role="tooltip"] {
+    @apply rounded px-2 py-1 max-w-xs absolute top-0 left-0 break-all z-[10000];
+    background-color: var(--oc-role-inverse-surface);
+    color: var(--oc-role-inverse-on-surface);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  [role="tooltip"] .arrow {
+    @apply absolute size-2 bg-inherit;
+    transform: rotate(45deg);
   }
 }
 
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index c7abaf357f..f3172cf24a 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -38,7 +38,7 @@
       <div class="resource-table-select-all flex justify-center items-center">
         <oc-checkbox
           id="resource-table-select-all"
-          v-oc-tooltip="{ content: selectAllCheckboxLabel, placement: 'bottom' }"
+          v-oc-tooltip="selectAllCheckboxLabel"
           size="large"
           :label="selectAllCheckboxLabel"
           :disabled="resources.length === disabledResources.length"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a3ecf02f7e..3f08e04694 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -193,15 +193,15 @@ importers:
       '@emoji-mart/data':
         specifier: ^1.2.1
         version: 1.2.1
+      '@floating-ui/dom':
+        specifier: ^1.7.5
+        version: 1.7.5
       '@popperjs/core':
         specifier: ^2.11.5
         version: 2.11.8
       '@vueuse/core':
         specifier: ^14.0.0
         version: 14.2.1(vue@3.5.28(typescript@5.9.3))
-      deepmerge:
-        specifier: ^4.2.2
-        version: 4.3.1
       emoji-mart:
         specifier: ^5.6.0
         version: 5.6.0
@@ -283,7 +283,7 @@ importers:
         version: 0.25.0(rollup@4.57.1)(vite@7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(yaml@2.8.2))
       vitepress:
         specifier: ^1.6.3
-        version: 1.6.4(@algolia/client-search@5.47.0)(@types/node@25.2.0)(axios@1.13.5)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.2)(postcss@8.5.6)(sass@1.97.3)(search-insights@2.17.3)(typescript@5.9.3)
+        version: 1.6.4(@algolia/client-search@5.47.0)(@types/node@25.2.0)(axios@1.13.5)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.2)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.97.3)(search-insights@2.17.3)(typescript@5.9.3)
       yaml:
         specifier: ^2.3.4
         version: 2.8.2
@@ -5088,6 +5088,10 @@ packages:
   lodash@4.17.23:
     resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==}
 
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
   lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
 
@@ -5781,6 +5785,15 @@ packages:
   randomfill@1.0.4:
     resolution: {integrity: sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==}
 
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
   read-installed-packages@2.0.1:
     resolution: {integrity: sha512-t+fJOFOYaZIjBpTVxiV8Mkt7yQyy4E6MSrrnt5FmPd4enYvpU/9DYGirDmN1XQwkfeuWIhM/iu0t2rm6iSr0CA==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -5951,6 +5964,9 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+
   screenfull@6.0.2:
     resolution: {integrity: sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==}
     engines: {node: ^14.13.1 || >=16.0.0}
@@ -8038,9 +8054,9 @@ snapshots:
 
   '@docsearch/css@3.8.2': {}
 
-  '@docsearch/js@3.8.2(@algolia/client-search@5.47.0)(search-insights@2.17.3)':
+  '@docsearch/js@3.8.2(@algolia/client-search@5.47.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
     dependencies:
-      '@docsearch/react': 3.8.2(@algolia/client-search@5.47.0)(search-insights@2.17.3)
+      '@docsearch/react': 3.8.2(@algolia/client-search@5.47.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)
       preact: 10.28.3
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -8049,13 +8065,15 @@ snapshots:
       - react-dom
       - search-insights
 
-  '@docsearch/react@3.8.2(@algolia/client-search@5.47.0)(search-insights@2.17.3)':
+  '@docsearch/react@3.8.2(@algolia/client-search@5.47.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
     dependencies:
       '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.47.0)(algoliasearch@5.47.0)(search-insights@2.17.3)
       '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.47.0)(algoliasearch@5.47.0)
       '@docsearch/css': 3.8.2
       algoliasearch: 5.47.0
     optionalDependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       search-insights: 2.17.3
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -11246,6 +11264,11 @@ snapshots:
 
   lodash@4.17.23: {}
 
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+    optional: true
+
   lower-case@2.0.2:
     dependencies:
       tslib: 2.8.1
@@ -12007,6 +12030,18 @@ snapshots:
       randombytes: 2.1.0
       safe-buffer: 5.2.1
 
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+    optional: true
+
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+    optional: true
+
   read-installed-packages@2.0.1:
     dependencies:
       '@npmcli/fs': 3.1.1
@@ -12202,6 +12237,11 @@ snapshots:
     optionalDependencies:
       '@parcel/watcher': 2.5.6
 
+  scheduler@0.23.2:
+    dependencies:
+      loose-envify: 1.4.0
+    optional: true
+
   screenfull@6.0.2: {}
 
   scule@1.3.0: {}
@@ -12780,10 +12820,10 @@ snapshots:
       sass: 1.97.3
       yaml: 2.8.2
 
-  vitepress@1.6.4(@algolia/client-search@5.47.0)(@types/node@25.2.0)(axios@1.13.5)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.2)(postcss@8.5.6)(sass@1.97.3)(search-insights@2.17.3)(typescript@5.9.3):
+  vitepress@1.6.4(@algolia/client-search@5.47.0)(@types/node@25.2.0)(axios@1.13.5)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.2)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.97.3)(search-insights@2.17.3)(typescript@5.9.3):
     dependencies:
       '@docsearch/css': 3.8.2
-      '@docsearch/js': 3.8.2(@algolia/client-search@5.47.0)(search-insights@2.17.3)
+      '@docsearch/js': 3.8.2(@algolia/client-search@5.47.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)
       '@iconify-json/simple-icons': 1.2.69
       '@shikijs/core': 2.5.0
       '@shikijs/transformers': 2.5.0

From d78563f838fc7966a76390c604acd2600a1aa5f2 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Tue, 17 Feb 2026 16:08:31 +0100
Subject: [PATCH 2/6] refactor(design-system): replace OcDrop tippy with
 floating-ui

---
 packages/design-system/package.json           |   2 -
 .../src/components/OcDrop/OcDrop.spec.ts      | 112 ++---
 .../src/components/OcDrop/OcDrop.vue          | 407 +++++++++++-------
 .../OcDrop/__snapshots__/OcDrop.spec.ts.snap  | 159 -------
 .../components/OcDrop/useEventListeners.ts    |  44 ++
 .../src/components/Groups/GroupsList.vue      |  36 +-
 .../src/components/Spaces/SpacesList.vue      |  44 +-
 .../src/components/Users/UsersList.vue        |  36 +-
 .../unit/components/Groups/GroupsList.spec.ts |  22 +-
 .../unit/components/Spaces/SpacesList.spec.ts |  14 -
 .../__snapshots__/SpacesList.spec.ts.snap     |  18 +-
 .../unit/components/Users/UsersList.spec.ts   |  17 +-
 .../views/__snapshots__/Users.spec.ts.snap    |   3 +
 .../src/components/CreateOrUploadMenu.vue     |   1 -
 .../Shares/Collaborators/EditDropdown.vue     |   1 +
 .../Shares/Collaborators/RoleDropdown.vue     |   4 +-
 .../components/Spaces/SpaceContextActions.vue |  24 +-
 .../Spaces/WhitespaceContextMenu.vue          | 121 +++---
 .../src/views/spaces/GenericSpace.vue         |  34 +-
 .../SharesNavigation.spec.ts.snap             |   2 +-
 .../Shares/Collaborators/RoleDropdown.spec.ts |   1 -
 .../SideBar/Shares/Links/CopyLink.spec.ts     |   2 -
 .../__snapshots__/SpaceHeader.spec.ts.snap    |  12 +-
 .../CreateOrUploadMenu.spec.ts.snap           |   4 +-
 .../unit/views/spaces/GenericSpace.spec.ts    |   9 -
 .../tests/unit/views/spaces/Projects.spec.ts  |   1 -
 .../web-app-search/src/portals/SearchBar.vue  |   3 +-
 .../tests/unit/portals/SearchBar.spec.ts      |   2 -
 .../ContextActions/ActionMenuDropItem.vue     |   3 +-
 .../ContextActions/ContextMenuQuickAction.vue |  40 +-
 .../components/FilesList/ResourceTable.vue    |  19 +-
 .../components/FilesList/ResourceTiles.vue    |  27 +-
 .../resources/useResourceViewContextMenu.ts   |  53 +--
 .../src/helpers/contextMenuDropdown.ts        |  55 ---
 packages/web-pkg/src/helpers/index.ts         |   1 -
 .../ContextActions/ContextActionMenu.spec.ts  |   1 -
 .../ActionMenuDropItem.spec.ts.snap           |   2 +-
 .../ContextActionMenu.spec.ts.snap            |  12 +-
 .../ContextMenuQuickAction.spec.ts.snap       |   9 +-
 .../FilesList/ResourceTable.spec.ts           |   9 +-
 .../FilesList/ResourceTiles.spec.ts           |  10 -
 .../__snapshots__/ResourceTiles.spec.ts.snap  |  16 +-
 .../__snapshots__/ItemFilter.spec.ts.snap     |   4 +-
 .../unit/helpers/contextMenuDropdown.spec.ts  |  75 ----
 packages/web-pkg/tsconfig.json                |   3 +-
 .../components/Topbar/ApplicationsMenu.vue    |   6 -
 .../__snapshots__/UserMenu.spec.ts.snap       |  18 +-
 pnpm-lock.yaml                                |  70 +--
 48 files changed, 589 insertions(+), 979 deletions(-)
 delete mode 100644 packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap
 create mode 100644 packages/design-system/src/components/OcDrop/useEventListeners.ts
 delete mode 100644 packages/web-pkg/src/helpers/contextMenuDropdown.ts
 delete mode 100644 packages/web-pkg/tests/unit/helpers/contextMenuDropdown.spec.ts

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 886b8b0d30..00c3d2b683 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -102,7 +102,6 @@
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
     "@floating-ui/dom": "^1.7.5",
-    "@popperjs/core": "^2.11.5",
     "@vueuse/core": "^14.0.0",
     "emoji-mart": "^5.6.0",
     "focus-trap": "^7.8.0",
@@ -111,7 +110,6 @@
     "lodash-es": "^4.17.21",
     "luxon": "^3.5.0",
     "portal-vue": "^3.0.0",
-    "tippy.js": "^6.3.7",
     "vue-inline-svg": "^4.0.0",
     "vue-router": "^5.0.0",
     "vue-select": "^4.0.0-beta.6",
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.spec.ts b/packages/design-system/src/components/OcDrop/OcDrop.spec.ts
index 2a29e271af..874b70ee8c 100644
--- a/packages/design-system/src/components/OcDrop/OcDrop.spec.ts
+++ b/packages/design-system/src/components/OcDrop/OcDrop.spec.ts
@@ -2,8 +2,14 @@ import { defaultPlugins, mount, shallowMount } from '@opencloud-eu/web-test-help
 import Drop from './OcDrop.vue'
 import { computed, nextTick } from 'vue'
 import { useIsMobile } from '../../composables'
+import { computePosition, ComputePositionReturn } from '@floating-ui/dom'
+import { flushPromises } from '@vue/test-utils'
 
 vi.mock('../../composables/useIsMobile')
+vi.mock('@floating-ui/dom', async (importOriginal) => ({
+  ...(await importOriginal<any>()),
+  computePosition: vi.fn(() => ({}))
+}))
 
 const dom = ({
   position = 'auto',
@@ -35,10 +41,12 @@ describe('OcDrop', () => {
     }))
   })
 
-  it('handles dropId prop', () => {
+  it('handles dropId prop', async () => {
     for (let i = 0; i < 5; i++) {
       const wrapper = shallowMount(Drop)
-      expect(wrapper.attributes().id).toBe(`oc-drop-${i + 1}`)
+      wrapper.vm.show()
+      await nextTick()
+      expect(wrapper.find('div').attributes().id).toBe(`oc-drop-${i + 1}`)
     }
 
     for (let i = 0; i < 5; i++) {
@@ -48,67 +56,61 @@ describe('OcDrop', () => {
           dropId: id
         }
       })
-      expect(wrapper.attributes().id).toBe(id)
+      wrapper.vm.show()
+      await nextTick()
+      expect(wrapper.find('div').attributes().id).toBe(id)
     }
   })
 
-  describe('tippy', () => {
-    it('inits tippy', async () => {
+  describe('floating UI', () => {
+    it('applies the calculated position values for the drop', async () => {
+      vi.useFakeTimers()
+      vi.mocked(computePosition).mockResolvedValue({ x: 2, y: 3 } as ComputePositionReturn)
       const { wrapper } = dom()
-      await nextTick()
-
-      const drop = wrapper.findComponent({ name: 'oc-drop' })
-      const tippy = drop.vm.tippyInstance
-
-      expect(tippy).toBeTruthy()
-      expect(tippy.reference).toBe(wrapper.find('#trigger').element)
-      expect(tippy.props.content).toBe(drop.vm.$refs.drop)
-    })
-
-    it('updates tippy', async () => {
-      const { wrapper } = dom()
-
-      await wrapper.setData({
-        position: 'left',
-        mode: 'hover'
-      })
-
       const drop = wrapper.findComponent({ name: 'oc-drop' })
-      const tippy = drop.vm.tippyInstance
+      drop.vm.show()
       await nextTick()
-
-      expect(tippy.props.placement).toBe('left')
-      expect(tippy.props.trigger).toBe('mouseenter focus')
+      expect(wrapper.find('.oc-card').exists()).toBeTruthy()
+      vi.runAllTimers()
+      await flushPromises()
+      expect(wrapper.find('.oc-drop').attributes('style')).toContain('left: 2px;')
+      expect(wrapper.find('.oc-drop').attributes('style')).toContain('top: 3px;')
     })
-
-    it('renders tippy', async () => {
-      const { wrapper } = dom()
-      await nextTick()
-      const trigger = wrapper.find('#trigger')
-      const wait = async () => {
-        await wrapper.vm.$nextTick()
-        return new Promise((resolve) => setTimeout(resolve, 100))
-      }
-
-      await trigger.trigger('click') // show
-      await wait()
-      expect(wrapper.findComponent(Drop).exists()).toBeTruthy()
-      expect(trigger.attributes()['aria-expanded']).toBe('true')
-      expect(wrapper.element).toMatchSnapshot()
-
-      await trigger.trigger('click') // hide
-      await wait()
-      expect(trigger.attributes()['aria-expanded']).toBe('false')
-      expect(wrapper.element).toMatchSnapshot()
-
-      await wrapper.setData({
-        mode: 'hover'
+    describe('mode', () => {
+      it('registers a click handler on the anchor in click mode', async () => {
+        vi.useFakeTimers()
+        vi.mocked(computePosition).mockResolvedValue({ x: 0, y: 0 } as ComputePositionReturn)
+        const { wrapper } = dom({ mode: 'click' })
+        await wrapper.find('#trigger').trigger('click')
+        vi.runAllTimers()
+        await flushPromises()
+        expect(wrapper.find('.oc-drop').exists()).toBeTruthy()
+      })
+      it('registers a mouseenter and /-leave handlers on the anchor in hover mode', async () => {
+        vi.useFakeTimers()
+        vi.mocked(computePosition).mockResolvedValue({ x: 0, y: 0 } as ComputePositionReturn)
+        const { wrapper } = dom({ mode: 'hover' })
+        const trigger = wrapper.find('#trigger')
+
+        await trigger.trigger('mouseenter')
+        vi.runAllTimers()
+        await flushPromises()
+        expect(wrapper.find('.oc-drop').exists()).toBeTruthy()
+
+        await trigger.trigger('mouseleave')
+        vi.runAllTimers()
+        await flushPromises()
+        expect(wrapper.find('.oc-drop').exists()).toBeFalsy()
+      })
+      it('does not register any event handler on the anchor in manual mode', async () => {
+        vi.useFakeTimers()
+        vi.mocked(computePosition).mockResolvedValue({ x: 0, y: 0 } as ComputePositionReturn)
+        const { wrapper } = dom({ mode: 'manual' })
+        await wrapper.find('#trigger').trigger('click')
+        vi.runAllTimers()
+        await flushPromises()
+        expect(wrapper.find('.oc-drop').exists()).toBeFalsy()
       })
-
-      await trigger.trigger('mouseenter') // show
-      await wait()
-      expect(trigger.attributes()['aria-expanded']).toBe('true')
-      expect(wrapper.element).toMatchSnapshot()
     })
   })
 
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
index c1219e55fb..259ccb573a 100644
--- a/packages/design-system/src/components/OcDrop/OcDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -11,22 +11,41 @@
   >
     <slot />
   </oc-mobile-drop>
-  <div v-else :id="dropId" ref="drop" class="oc-drop shadow-md/20 rounded-sm" @click="onClick">
-    <oc-card v-if="isOpen && $slots.default" :body-class="[getTailwindPaddingClass(paddingSize)]">
-      <slot />
-    </oc-card>
-    <slot v-else-if="isOpen" name="special" />
-  </div>
+  <template v-else>
+    <Transition name="oc-drop">
+      <div
+        v-if="isOpen"
+        :id="dropId"
+        ref="drop"
+        class="oc-drop shadow-md/20 rounded-sm bg-role-surface"
+        @click="onClick"
+      >
+        <oc-card v-if="$slots.default" :body-class="[getTailwindPaddingClass(paddingSize)]">
+          <slot />
+        </oc-card>
+        <slot name="special" />
+      </div>
+    </Transition>
+  </template>
 </template>
 
 <script setup lang="ts">
-import tippy, { hideAll, Props as TippyProps, Instance } from 'tippy.js'
-import { detectOverflow, Modifier } from '@popperjs/core'
+import { computePosition, offset as offsetFn, flip, Placement, shift, size } from '@floating-ui/dom'
 import { getTailwindPaddingClass, SizeType, uniqueId } from '../../helpers'
-import { computed, nextTick, onBeforeUnmount, ref, unref, useTemplateRef, watch } from 'vue'
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  unref,
+  useTemplateRef,
+  watch
+} from 'vue'
 import { useIsMobile } from '../../composables'
 import OcMobileDrop from './OcMobileDrop.vue'
 import OcCard from '../OcCard/OcCard.vue'
+import { useEventListeners } from './useEventListeners'
 
 export interface Props {
   /**
@@ -43,48 +62,25 @@ export interface Props {
    */
   dropId?: string
   /**
-   * @docs Determines if the drop element is nested.
-   * @default false
-   */
-  isNestedElement?: boolean
-  /**
-   * @docs Determines the event that triggers the drop.
+   * @docs Determines the event that triggers the drop. `manual` can be used to control the drop programmatically via the exposed `show` and `hide` methods.
    * @default 'click'
    */
   mode?: 'click' | 'hover' | 'manual'
   /**
-   * @docs The visual offset of the drop.
-   * @default [0, 0]
+   * @docs The vertical offset of the drop.
+   * @default 5
    */
-  offset?: TippyProps['offset']
+  offset?: number
   /**
    * @docs The padding size of the drop.
    * @default 'medium'
    */
   paddingSize?: SizeType | 'remove'
   /**
-   * @docs The popper options of the drop. Please refer to the component source for more information.
-   */
-  popperOptions?: TippyProps['popperOptions']
-  /**
-   * @docs The position of the drop.
+   * @docs The position of the drop. Check the floating-ui document for more details on the type.
    * @default 'bottom-start'
    */
-  position?:
-    | 'top-start'
-    | 'right-start'
-    | 'bottom-start'
-    | 'left-start'
-    | 'auto-start'
-    | 'top-end'
-    | 'right-end'
-    | 'bottom-end'
-    | 'left-end'
-    | 'auto-end'
-  /**
-   * @docs Element selector that can be used as a target of the drop.
-   */
-  target?: string
+  position?: Placement
   /**
    * @docs CSS selector for the element to be used as toggle. By default, the preceding element is used. Note that a toggle is mandatory for the bottom drawer in mobile view.
    */
@@ -122,13 +118,10 @@ export interface Slots {
 const {
   closeOnClick = false,
   dropId = uniqueId('oc-drop-'),
-  isNestedElement = false,
   mode = 'click',
-  offset = [0, 0],
+  offset = 5,
   paddingSize = 'medium',
-  popperOptions = {},
   position = 'bottom-start',
-  target,
   toggle = '',
   title = '',
   enforceDropOnMobile = false
@@ -137,31 +130,40 @@ const {
 const emit = defineEmits<Emits>()
 defineSlots<Slots>()
 
+const { registerEventListener, unregisterEventListeners } = useEventListeners()
 const { isMobile } = useIsMobile()
 const isOpen = ref(false)
 
 const useBottomDrawer = computed(() => unref(isMobile) && !enforceDropOnMobile)
 const bottomDrawerRef = useTemplateRef<typeof OcMobileDrop>('bottomDrawerRef')
-
 const drop = useTemplateRef('drop')
-const tippyInstance = ref<Instance | null>(null)
 
-const show = () => {
+const anchor = computed(() => {
+  if (!toggle) {
+    return null
+  }
+  return document.querySelector(toggle)
+})
+
+const show = ({ event, useMouseAnchor }: { event?: Event; useMouseAnchor?: boolean } = {}) => {
   if (unref(useBottomDrawer)) {
     unref(bottomDrawerRef).show()
     return
   }
-  unref(tippyInstance)?.show()
+  if (unref(isOpen)) {
+    return
+  }
+  showDrop({ event, useMouseAnchor })
 }
 const hide = () => {
   if (unref(useBottomDrawer)) {
     unref(bottomDrawerRef).hide()
     return
   }
-  unref(tippyInstance)?.hide()
+  hideDrop()
 }
 
-defineExpose({ show, hide, tippy: tippyInstance })
+defineExpose({ show, hide })
 
 const onClick = (event: Event) => {
   const isNestedDropToggle = (event.target as HTMLElement)
@@ -169,145 +171,223 @@ const onClick = (event: Event) => {
     ?.hasAttribute('aria-expanded')
 
   if (closeOnClick && !isNestedDropToggle) {
-    hide()
+    hideDrop()
   }
 }
 
-const onFocusOut = (event: FocusEvent) => {
-  const tippyBox = drop.value?.closest('.tippy-box')
-  const focusLeft = event.relatedTarget && !tippyBox?.contains(event.relatedTarget as Node)
+const showDrop = async ({
+  event,
+  useMouseAnchor
+}: { event?: Event; useMouseAnchor?: boolean } = {}) => {
+  if (unref(isOpen)) {
+    hideDrop()
+    return
+  }
+
+  let anchorEl = unref(anchor)
+  if (useMouseAnchor) {
+    // use mouse position as anchor element
+    const mouseEvent = event as MouseEvent
+    anchorEl = {
+      getBoundingClientRect() {
+        return {
+          width: 0,
+          height: 0,
+          x: mouseEvent.clientX,
+          y: mouseEvent.clientY,
+          top: mouseEvent.clientY,
+          left: mouseEvent.clientX,
+          right: mouseEvent.clientX,
+          bottom: mouseEvent.clientY
+        }
+      }
+    } as Element
+  }
+
+  isOpen.value = true
+  await nextTick()
+  if (!anchorEl) {
+    console.warn('OcDrop cannot be opened: anchor element not found')
+    return
+  }
+
+  // fixes a timing issue with the rendering of the drop
+  await new Promise((resolve) => setTimeout(resolve, 0))
+
+  const { x, y } = await computePosition(anchorEl, unref(drop), {
+    placement: position,
+    middleware: [
+      offsetFn(offset),
+      flip(),
+      shift({ padding: 5 }),
+      size({
+        apply({ availableWidth, availableHeight, elements }) {
+          Object.assign(elements.floating.style, {
+            maxWidth: `${Math.min(400, availableWidth - 10)}px`,
+            maxHeight: `${Math.max(0, availableHeight - 10)}px`
+          })
+        }
+      })
+    ]
+  })
+
+  Object.assign(unref(drop).style, { left: `${x}px`, top: `${y}px` })
+  unref(anchor)?.setAttribute('aria-expanded', 'true')
+  emit('showDrop')
+
+  registerEventListener(document, 'click', handleDropClickOutside, 'document', {
+    capture: true
+  })
+  registerEventListener(document, 'contextmenu', handleDropClickOutside, 'document', {
+    capture: true
+  })
+  registerEventListener(document, 'keydown', handleDropKeydown, 'document')
+  registerEventListener(unref(drop), 'focusout', handleDropFocusOut, 'drop')
+
+  if (mode === 'hover') {
+    registerEventListener(unref(drop), 'mouseenter', handleDropMouseEnter, 'drop')
+    registerEventListener(unref(drop), 'mouseleave', handleDropMouseLeave, 'drop')
+  }
+}
+
+const hideDrop = () => {
+  unregisterEventListeners(['drop', 'document'])
+  isOpen.value = false
+  unref(anchor)?.setAttribute('aria-expanded', 'false')
+  emit('hideDrop')
+}
+
+const isFocusEvent = (event: Event): event is FocusEvent => event instanceof FocusEvent
+const isKeyboardEvent = (event: Event): event is KeyboardEvent => event instanceof KeyboardEvent
+
+const handleDropFocusOut = (event: Event) => {
+  if (!isFocusEvent(event)) {
+    return
+  }
+  const focusLeft = event.relatedTarget && !unref(drop)?.contains(event.relatedTarget as Node)
   if (focusLeft) {
-    hide()
+    hideDrop()
   }
 }
 
-const triggerMapping = computed(() => {
-  return (
-    {
-      hover: 'mouseenter focus',
-      click: undefined,
-      manual: undefined
-    }[mode] || mode
-  )
-})
+const handleDropClickOutside = (event: Event) => {
+  const target = event.target as Node
+  const clickedOutsideDrop = unref(drop) && !unref(drop).contains(target)
+  if (clickedOutsideDrop) {
+    const anchorElement = unref(anchor)
+    const clickedOnAnchor = anchorElement && anchorElement.contains(target)
+    if (!clickedOnAnchor) {
+      hideDrop()
+    }
+  }
+}
 
-watch(
-  () => position,
-  () => {
-    unref(tippyInstance)?.setProps({ placement: position })
+const handleDropKeydown = (event: Event) => {
+  if (isKeyboardEvent(event) && event.code === 'Escape') {
+    hideDrop()
+    ;(unref(anchor) as HTMLElement)?.focus()
   }
-)
+}
 
-watch(
-  () => mode,
-  () => {
-    unref(tippyInstance)?.setProps({ trigger: triggerMapping.value })
+let hoverCloseTimeout: ReturnType<typeof setTimeout> | null = null
+
+const clearHoverTimeout = () => {
+  if (hoverCloseTimeout !== null) {
+    clearTimeout(hoverCloseTimeout)
+    hoverCloseTimeout = null
   }
-)
+}
 
-onBeforeUnmount(() => {
-  unref(drop)?.removeEventListener('focusout', onFocusOut)
-  // destroy(unref(tippyInstance))
-})
+const handleDropMouseEnter = () => {
+  clearHoverTimeout()
+}
 
-const initializeTippy = () => {
-  // destroy(unref(tippyInstance))
-  const to = target
-    ? document.querySelector(target)
-    : toggle
-      ? document.querySelector(toggle)
-      : drop.value?.previousElementSibling
-  const content = drop.value
+const handleDropMouseLeave = () => {
+  hoverCloseTimeout = setTimeout(hideDrop, 100)
+}
 
-  if (!to || !content) {
-    return
+const handleAnchorClick = (event: Event) => {
+  showDrop({ event })
+}
+
+const handleAnchorMouseEnter = (event: Event) => {
+  clearHoverTimeout()
+  if (!unref(isOpen)) {
+    showDrop({ event })
   }
-  const config: Partial<TippyProps> = {
-    trigger: triggerMapping.value,
-    placement: position,
-    arrow: false,
-    hideOnClick: !isNestedElement,
-    interactive: true,
-    // plugins: [hideOnEsc],
-    theme: 'none',
-    maxWidth: 416,
-    offset,
-    onShow: (instance) => {
-      isOpen.value = true
-      emit('showDrop')
-      if (!isNestedElement) {
-        hideAll({ exclude: instance })
-      }
-    },
-    onHide: () => {
-      isOpen.value = false
-      emit('hideDrop')
-    },
-    popperOptions: {
-      ...popperOptions,
-      modifiers: [
-        ...(popperOptions?.modifiers ? popperOptions.modifiers : []),
-        {
-          name: 'fixVerticalPosition',
-          enabled: true,
-          phase: 'beforeWrite',
-          requiresIfExists: ['offset', 'preventOverflow', 'flip'],
-          fn({ state }) {
-            const overflow = detectOverflow(state)
-            const dropHeight = state.modifiersData.fullHeight || state.elements.popper.offsetHeight
-            const dropYPos = overflow.top * -1 - 10
-            const availableHeight = dropYPos + dropHeight + overflow.bottom * -1
-            const spaceBelow = availableHeight - dropYPos
-            const spaceAbove = availableHeight - spaceBelow
-
-            if (dropHeight > spaceBelow && dropHeight > spaceAbove) {
-              state.styles.popper.top = `-${dropYPos}px`
-              state.modifiersData.fullHeight = dropHeight
-            }
-
-            if (dropHeight > availableHeight) {
-              state.styles.popper.maxHeight = `${availableHeight - 10}px`
-              state.styles.popper.overflowY = `auto`
-              state.styles.popper.overflowX = `hidden`
-            }
-          }
-        } as Modifier<'fixVerticalPosition', unknown>
-      ]
-    },
-    content
+}
+
+const handleAnchorMouseLeave = () => {
+  hoverCloseTimeout = setTimeout(hideDrop, 100)
+}
+
+const setupAriaAttributes = () => {
+  const anchorElement = unref(anchor)
+  if (!anchorElement) {
+    return
   }
+  anchorElement.setAttribute('aria-haspopup', 'true')
+  anchorElement.setAttribute('aria-expanded', 'false')
+}
 
-  if (target) {
-    config.triggerTarget = toggle
-      ? document.querySelector(toggle)
-      : drop.value?.previousElementSibling
+const setupAnchorEvents = () => {
+  const anchorElement = unref(anchor)
+  if (!anchorElement || unref(useBottomDrawer)) {
+    return
   }
 
-  tippyInstance.value = tippy(to, config)
-  drop.value?.addEventListener('focusout', onFocusOut)
+  switch (mode) {
+    case 'click':
+      registerEventListener(anchorElement, 'click', handleAnchorClick, 'anchor')
+      break
+    case 'hover':
+      registerEventListener(anchorElement, 'mouseenter', handleAnchorMouseEnter, 'anchor')
+      registerEventListener(anchorElement, 'mouseleave', handleAnchorMouseLeave, 'anchor')
+      break
+    case 'manual':
+      break
+  }
 }
 
-watch(
-  useBottomDrawer,
-  async () => {
-    await nextTick()
-    if (unref(useBottomDrawer)) {
-      if (unref(tippyInstance)) {
-        // destroy(unref(tippyInstance))
-      }
-      return
-    }
-    initializeTippy()
-  },
-  { immediate: true }
-)
+watch(useBottomDrawer, () => {
+  setupAriaAttributes()
+  if (unref(useBottomDrawer)) {
+    unregisterEventListeners()
+  } else {
+    setupAnchorEvents()
+  }
+})
+
+onMounted(() => {
+  setupAnchorEvents()
+  setupAriaAttributes()
+})
+
+onBeforeUnmount(() => {
+  clearHoverTimeout()
+  unregisterEventListeners()
+
+  const anchorEl = unref(anchor)
+  anchorEl?.removeAttribute('aria-expanded')
+  anchorEl?.removeAttribute('aria-haspopup')
+})
 </script>
 <style>
 @reference '@opencloud-eu/design-system/tailwind';
 
 @layer components {
   .oc-drop {
-    @apply w-xs max-w-full;
+    @apply w-xs absolute top-[-9999px] left-[-9999px] overflow-y-auto;
+    z-index: 1000;
+  }
+
+  .oc-drop-enter-active {
+    transition: opacity 250ms ease;
+  }
+
+  .oc-drop-enter-from,
+  .oc-drop-leave-to {
+    opacity: 0;
   }
 
   .oc-mobile-drop li a,
@@ -332,11 +412,4 @@ watch(
     @apply mb-0;
   }
 }
-
-.tippy-box[data-theme~='none'] {
-  /* overwrite tippy styles */
-  background-color: transparent;
-  font-size: inherit;
-  line-height: inherit;
-}
 </style>
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
deleted file mode 100644
index 6e077773eb..0000000000
--- a/packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap
+++ /dev/null
@@ -1,159 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`OcDrop > tippy > renders tippy 1`] = `
-<div>
-  <p
-    aria-expanded="true"
-    id="trigger"
-  >
-    trigger
-  </p>
-  <div
-    data-tippy-root=""
-    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
-      class="tippy-box"
-      data-animation="fade"
-      data-escaped=""
-      data-placement="top"
-      data-reference-hidden=""
-      data-state="visible"
-      data-theme="none"
-      role="tooltip"
-      style="max-width: 416px; transition-duration: 300ms;"
-      tabindex="-1"
-    >
-      <div
-        class="tippy-content"
-        data-state="visible"
-        style="transition-duration: 300ms;"
-      >
-        <div
-          class="oc-drop shadow-md/20 rounded-sm"
-          id="oc-drop-8"
-        >
-          <div
-            class="oc-card"
-          >
-            <!--v-if-->
-             
-            <div
-              class="oc-card-body p-4"
-            >
-              
-              
-              show
-              
-              
-            </div>
-             
-            <!--v-if-->
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`OcDrop > tippy > renders tippy 2`] = `
-<div>
-  <p
-    aria-expanded="false"
-    id="trigger"
-  >
-    trigger
-  </p>
-  <div
-    data-tippy-root=""
-    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
-      class="tippy-box"
-      data-animation="fade"
-      data-escaped=""
-      data-placement="top"
-      data-reference-hidden=""
-      data-state="hidden"
-      data-theme="none"
-      role="tooltip"
-      style="max-width: 416px; transition-duration: 250ms;"
-      tabindex="-1"
-    >
-      <div
-        class="tippy-content"
-        data-state="hidden"
-        style="transition-duration: 250ms;"
-      >
-        <div
-          class="oc-drop shadow-md/20 rounded-sm"
-          id="oc-drop-8"
-        >
-          <!--v-if-->
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`OcDrop > tippy > renders tippy 3`] = `
-<div>
-  <p
-    aria-expanded="true"
-    id="trigger"
-  >
-    trigger
-  </p>
-  <div
-    data-tippy-root=""
-    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
-      class="tippy-box"
-      data-animation="fade"
-      data-escaped=""
-      data-placement="top"
-      data-reference-hidden=""
-      data-state="visible"
-      data-theme="none"
-      role="tooltip"
-      style="max-width: 416px; transition-duration: 300ms;"
-      tabindex="-1"
-    >
-      <div
-        class="tippy-content"
-        data-state="visible"
-        style="transition-duration: 300ms;"
-      >
-        <div
-          class="oc-drop shadow-md/20 rounded-sm"
-          id="oc-drop-8"
-        >
-          <div
-            class="oc-card"
-          >
-            <!--v-if-->
-             
-            <div
-              class="oc-card-body p-4"
-            >
-              
-              
-              show
-              
-              
-            </div>
-             
-            <!--v-if-->
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/design-system/src/components/OcDrop/useEventListeners.ts b/packages/design-system/src/components/OcDrop/useEventListeners.ts
new file mode 100644
index 0000000000..1e16b67070
--- /dev/null
+++ b/packages/design-system/src/components/OcDrop/useEventListeners.ts
@@ -0,0 +1,44 @@
+interface EventListenerEntry {
+  target: Element | Document
+  type: string
+  handler: EventListener
+  options?: AddEventListenerOptions | boolean
+  category: 'anchor' | 'drop' | 'document'
+}
+
+export const useEventListeners = () => {
+  const eventListeners: EventListenerEntry[] = []
+
+  const registerEventListener = (
+    target: Element | Document,
+    type: string,
+    handler: EventListener,
+    category: EventListenerEntry['category'],
+    options?: AddEventListenerOptions | boolean
+  ) => {
+    target.addEventListener(type, handler, options)
+    eventListeners.push({ target, type, handler, options, category })
+  }
+
+  const unregisterEventListeners = (categories?: EventListenerEntry['category'][]) => {
+    if (!categories) {
+      eventListeners.forEach(({ target, type, handler, options }) => {
+        target.removeEventListener(type, handler, options)
+      })
+      eventListeners.length = 0
+      return
+    }
+
+    const toRemove = eventListeners.filter((l) => categories.includes(l.category))
+    toRemove.forEach(({ target, type, handler, options }) => {
+      target.removeEventListener(type, handler, options)
+    })
+    eventListeners.splice(
+      0,
+      eventListeners.length,
+      ...eventListeners.filter((l) => !categories.includes(l.category))
+    )
+  }
+
+  return { registerEventListener, unregisterEventListeners }
+}
diff --git a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
index 8e7fa94cce..7bba706af6 100644
--- a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
@@ -20,7 +20,7 @@
       :hover="true"
       padding-x="medium"
       @sort="handleSort"
-      @contextmenu-clicked="showContextMenuOnRightClick"
+      @contextmenu-clicked="(el, event, item) => showContextMenuOnRightClick(event, item)"
       @highlight="rowClicked"
     >
       <template #selectHeader>
@@ -94,7 +94,7 @@
           <oc-icon name="pencil" fill-type="line" />
         </oc-button>
         <context-menu-quick-action
-          ref="contextMenuButtonRef"
+          :ref="(el: any) => (contextMenuDrops[item.id] = el?.drop)"
           :item="item"
           :title="item.displayName"
           class="groups-table-btn-action-dropdown"
@@ -125,16 +125,13 @@ import {
   onMounted,
   ref,
   unref,
-  useTemplateRef,
   watch
 } from 'vue'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
 import {
-  ContextMenuBtnClickEventData,
   ContextMenuQuickAction,
   defaultFuseOptions,
-  displayPositionedDropdown,
   eventBus,
   Pagination,
   useFileListHeaderPosition,
@@ -156,6 +153,7 @@ import { useGroupSettingsStore } from '../../composables'
 import { storeToRefs } from 'pinia'
 import { findIndex } from 'lodash-es'
 import { FieldType, SortDir } from '@opencloud-eu/design-system/helpers'
+import { OcDrop } from '@opencloud-eu/design-system/components'
 
 export default defineComponent({
   name: 'GroupsList',
@@ -163,8 +161,7 @@ export default defineComponent({
   setup() {
     const { $gettext } = useGettext()
     const { y: fileListHeaderY } = useFileListHeaderPosition('#admin-settings-app-bar')
-    const contextMenuButtonRef =
-      useTemplateRef<ComponentPublicInstance<typeof ContextMenuQuickAction>>('contextMenuButtonRef')
+    const contextMenuDrops = ref<Record<string, ComponentPublicInstance<typeof OcDrop>>>({})
     const sortBy = ref<keyof Group>('displayName')
     const sortDir = ref<SortDir>(SortDir.Asc)
     const filterTerm = ref('')
@@ -239,30 +236,15 @@ export default defineComponent({
       unselectAllGroups()
       selectGroup(resource)
     }
-    const showContextMenuOnBtnClick = (data: ContextMenuBtnClickEventData, group: Group) => {
-      const { dropdown, event } = data
-      if (dropdown?.tippy === undefined) {
-        return
-      }
-      if (!isGroupSelected(group)) {
-        groupSettingsStore.setSelectedGroups([group])
-      }
-      displayPositionedDropdown(dropdown.tippy, event, unref(contextMenuButtonRef))
+    const showContextMenuOnBtnClick = (event: MouseEvent | KeyboardEvent, group: Group) => {
+      unref(contextMenuDrops)[group.id]?.show({ event })
     }
-    const showContextMenuOnRightClick = (
-      row: ComponentPublicInstance<unknown>,
-      event: MouseEvent,
-      group: Group
-    ) => {
+    const showContextMenuOnRightClick = (event: MouseEvent, group: Group) => {
       event.preventDefault()
-      const dropdown = row.$el.getElementsByClassName('groups-table-btn-action-dropdown')[0]
-      if (dropdown === undefined) {
-        return
-      }
       if (!isGroupSelected(group)) {
         groupSettingsStore.setSelectedGroups([group])
       }
-      displayPositionedDropdown(dropdown._tippy, event, unref(contextMenuButtonRef))
+      unref(contextMenuDrops)[group.id]?.show({ event, useMouseAnchor: true })
     }
 
     const showEditPanel = (group: Group) => {
@@ -390,7 +372,7 @@ export default defineComponent({
       showContextMenuOnBtnClick,
       showContextMenuOnRightClick,
       fileListHeaderY,
-      contextMenuButtonRef,
+      contextMenuDrops,
       showEditPanel,
       readOnlyLabel,
       filterTerm,
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index 55a161627a..e945649c53 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -21,7 +21,7 @@
       :hover="true"
       padding-x="medium"
       @sort="handleSort"
-      @contextmenu-clicked="showContextMenuOnRightClick"
+      @contextmenu-clicked="(el, event, item) => showContextMenuOnRightClick(event, item)"
       @highlight="fileClicked"
     >
       <template #selectHeader>
@@ -97,7 +97,7 @@
             <oc-icon name="information" fill-type="line" />
           </oc-button>
           <context-menu-quick-action
-            ref="contextMenuButtonRef"
+            :ref="(el: any) => (contextMenuDrops[item.id] = el?.drop)"
             :item="item"
             :title="item.name"
             class="spaces-table-btn-action-dropdown"
@@ -124,25 +124,14 @@
 import {
   formatDateFromJSDate,
   formatRelativeDateFromJSDate,
-  displayPositionedDropdown,
   formatFileSize,
   defaultFuseOptions,
   useKeyboardActions,
-  ContextMenuBtnClickEventData,
   useIsTopBarSticky,
   useSharesStore,
   useSideBar
 } from '@opencloud-eu/web-pkg'
-import {
-  ComponentPublicInstance,
-  computed,
-  nextTick,
-  onMounted,
-  ref,
-  unref,
-  useTemplateRef,
-  watch
-} from 'vue'
+import { ComponentPublicInstance, computed, nextTick, onMounted, ref, unref, watch } from 'vue'
 import { getSpaceManagers, SpaceResource } from '@opencloud-eu/web-client'
 import Mark from 'mark.js'
 import Fuse from 'fuse.js'
@@ -165,6 +154,7 @@ import {
 import { useSpaceSettingsStore } from '../../composables'
 import { storeToRefs } from 'pinia'
 import { FieldType, SortDir } from '@opencloud-eu/design-system/helpers'
+import { OcDrop } from '@opencloud-eu/design-system/components'
 
 const router = useRouter()
 const route = useRoute()
@@ -175,8 +165,7 @@ const sharesStore = useSharesStore()
 const { openSideBar } = useSideBar()
 
 const { y: fileListHeaderY } = useFileListHeaderPosition('#admin-settings-app-bar')
-const contextMenuButtonRef =
-  useTemplateRef<ComponentPublicInstance<typeof ContextMenuQuickAction>>('contextMenuButtonRef')
+const contextMenuDrops = ref<Record<string, ComponentPublicInstance<typeof OcDrop>>>({})
 const sortBy = ref('name')
 const sortDir = ref(SortDir.Asc)
 const filterTerm = ref('')
@@ -457,30 +446,15 @@ const fileClicked = (data: [SpaceResource, MouseEvent | KeyboardEvent]) => {
   selectSpace(resource)
 }
 
-const showContextMenuOnBtnClick = (data: ContextMenuBtnClickEventData, space: SpaceResource) => {
-  const { dropdown, event } = data
-  if (dropdown?.tippy === undefined) {
-    return
-  }
-  if (!isSpaceSelected(space)) {
-    spaceSettingsStore.setSelectedSpaces([space])
-  }
-  displayPositionedDropdown(dropdown.tippy, event, unref(contextMenuButtonRef))
+const showContextMenuOnBtnClick = (event: MouseEvent | KeyboardEvent, space: SpaceResource) => {
+  unref(contextMenuDrops)[space.id]?.show({ event })
 }
-const showContextMenuOnRightClick = (
-  row: ComponentPublicInstance<unknown>,
-  event: MouseEvent,
-  space: SpaceResource
-) => {
+const showContextMenuOnRightClick = (event: MouseEvent, space: SpaceResource) => {
   event.preventDefault()
-  const dropdown = row.$el.getElementsByClassName('spaces-table-btn-action-dropdown')[0]
-  if (dropdown === undefined) {
-    return
-  }
   if (!isSpaceSelected(space)) {
     spaceSettingsStore.setSelectedSpaces([space])
   }
-  displayPositionedDropdown(dropdown._tippy, event, unref(contextMenuButtonRef))
+  unref(contextMenuDrops)[space.id]?.show({ event, useMouseAnchor: true })
 }
 
 const spaceDetailsLabel = computed(() => {
diff --git a/packages/web-app-admin-settings/src/components/Users/UsersList.vue b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
index d112e330ee..776001c233 100644
--- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue
+++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -20,7 +20,7 @@
         :hover="true"
         padding-x="medium"
         @sort="handleSort"
-        @contextmenu-clicked="showContextMenuOnRightClick"
+        @contextmenu-clicked="(el, event, item) => showContextMenuOnRightClick(event, item)"
         @highlight="rowClicked"
       >
         <template #selectHeader>
@@ -87,7 +87,7 @@
             <oc-icon name="pencil" fill-type="line" />
           </oc-button>
           <context-menu-quick-action
-            ref="contextMenuButtonRef"
+            :ref="(el: any) => (contextMenuDrops[item.id] = el?.drop)"
             :item="item"
             :title="item.displayName"
             class="users-table-btn-action-dropdown"
@@ -125,9 +125,7 @@ import {
 } from 'vue'
 import {
   AppLoadingSpinner,
-  ContextMenuBtnClickEventData,
   ContextMenuQuickAction,
-  displayPositionedDropdown,
   eventBus,
   Pagination,
   queryItemAsString,
@@ -149,7 +147,7 @@ import {
 } from '../../composables/keyboardActions'
 import { findIndex } from 'lodash-es'
 import Mark from 'mark.js'
-import { OcTable } from '@opencloud-eu/design-system/components'
+import { OcDrop, OcTable } from '@opencloud-eu/design-system/components'
 import { FieldType, SortDir } from '@opencloud-eu/design-system/helpers'
 import { useCapabilityStore } from '@opencloud-eu/web-pkg'
 
@@ -172,8 +170,7 @@ export default defineComponent({
     const { openSideBar, openSideBarPanel } = useSideBar()
 
     const tableRef = useTemplateRef<ComponentPublicInstance<typeof OcTable>>('tableRef')
-    const contextMenuButtonRef =
-      useTemplateRef<ComponentPublicInstance<typeof ContextMenuQuickAction>>('contextMenuButtonRef')
+    const contextMenuDrops = ref<Record<string, ComponentPublicInstance<typeof OcDrop>>>({})
     const sortBy = ref('onPremisesSamAccountName')
     const sortDir = ref<SortDir>(SortDir.Asc)
     const { y: fileListHeaderY } = useFileListHeaderPosition('#admin-settings-app-bar')
@@ -259,30 +256,15 @@ export default defineComponent({
       unselectAllUsers()
       selectUser(resource)
     }
-    const showContextMenuOnBtnClick = (data: ContextMenuBtnClickEventData, user: User) => {
-      const { dropdown, event } = data
-      if (dropdown?.tippy === undefined) {
-        return
-      }
-      if (!isUserSelected(user)) {
-        userSettingsStore.setSelectedUsers([user])
-      }
-      displayPositionedDropdown(dropdown.tippy, event, unref(contextMenuButtonRef))
+    const showContextMenuOnBtnClick = (event: MouseEvent | KeyboardEvent, user: User) => {
+      unref(contextMenuDrops)[user.id]?.show({ event })
     }
-    const showContextMenuOnRightClick = (
-      row: ComponentPublicInstance<unknown>,
-      event: MouseEvent,
-      user: User
-    ) => {
+    const showContextMenuOnRightClick = (event: MouseEvent, user: User) => {
       event.preventDefault()
-      const dropdown = row.$el.getElementsByClassName('users-table-btn-action-dropdown')[0]
-      if (dropdown === undefined) {
-        return
-      }
       if (!isUserSelected(user)) {
         userSettingsStore.setSelectedUsers([user])
       }
-      displayPositionedDropdown(dropdown._tippy, event, unref(contextMenuButtonRef))
+      unref(contextMenuDrops)[user.id]?.show({ event, useMouseAnchor: true })
     }
 
     const getRoleDisplayNameByUser = (user: User) => {
@@ -427,7 +409,7 @@ export default defineComponent({
       showUserAssigmentPanel,
       isUserSelected,
       rowClicked,
-      contextMenuButtonRef,
+      contextMenuDrops,
       showContextMenuOnBtnClick,
       showContextMenuOnRightClick,
       fileListHeaderY,
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts
index a6f1e9067b..679a75b3ae 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts
@@ -5,7 +5,7 @@ import {
   mount,
   shallowMount
 } from '@opencloud-eu/web-test-helpers'
-import { displayPositionedDropdown, queryItemAsString, useSideBar } from '@opencloud-eu/web-pkg'
+import { queryItemAsString, useSideBar } from '@opencloud-eu/web-pkg'
 import { useGroupSettingsStore } from '../../../../src/composables'
 import { Group } from '@opencloud-eu/web-client/graph/generated'
 
@@ -17,8 +17,7 @@ const getGroupMocks = () =>
 
 vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
-  queryItemAsString: vi.fn(),
-  displayPositionedDropdown: vi.fn()
+  queryItemAsString: vi.fn()
 }))
 
 describe('GroupsList', () => {
@@ -63,20 +62,6 @@ describe('GroupsList', () => {
       ).toEqual([])
     })
   })
-  it('should show the context menu on right click', async () => {
-    const groups = getGroupMocks()
-    const spyDisplayPositionedDropdown = vi.mocked(displayPositionedDropdown)
-    const { wrapper } = getWrapper({ mountType: mount, groups })
-    await wrapper.find(`[data-item-id="${groups[0].id}"]`).trigger('contextmenu')
-    expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
-  })
-  it('should show the context menu on context menu button click', async () => {
-    const groups = getGroupMocks()
-    const spyDisplayPositionedDropdown = vi.mocked(displayPositionedDropdown)
-    const { wrapper } = getWrapper({ mountType: mount, groups })
-    await wrapper.find('.groups-table-btn-action-dropdown').trigger('click')
-    expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
-  })
   it('should show the group details on details button click', async () => {
     const groups = getGroupMocks()
     const { wrapper } = getWrapper({ mountType: mount, groups })
@@ -142,9 +127,6 @@ function getWrapper({
 
   return {
     wrapper: mountType(GroupsList, {
-      props: {
-        headerPosition: 0
-      },
       global: {
         plugins: [
           ...defaultPlugins({
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
index a1dd06d461..06572d4d03 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
@@ -6,7 +6,6 @@ import {
   shallowMount
 } from '@opencloud-eu/web-test-helpers'
 import { queryItemAsString, useSideBar } from '@opencloud-eu/web-pkg'
-import { displayPositionedDropdown } from '@opencloud-eu/web-pkg'
 import { nextTick } from 'vue'
 import { useSpaceSettingsStore } from '../../../../src/composables'
 import { mock } from 'vitest-mock-extended'
@@ -84,7 +83,6 @@ const selectors = {
 
 vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
-  displayPositionedDropdown: vi.fn(),
   queryItemAsString: vi.fn()
 }))
 
@@ -129,18 +127,6 @@ describe('SpacesList', () => {
     await nextTick()
     expect((wrapper.vm as any).items).toEqual([spaceMocks[1]])
   })
-  it('should show the context menu on right click', async () => {
-    const spyDisplayPositionedDropdown = vi.mocked(displayPositionedDropdown)
-    const { wrapper } = getWrapper({ spaces: spaceMocks })
-    await wrapper.find(`[data-item-id="${spaceMocks[0].id}"]`).trigger('contextmenu')
-    expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
-  })
-  it('should show the context menu on context menu button click', async () => {
-    const spyDisplayPositionedDropdown = vi.mocked(displayPositionedDropdown)
-    const { wrapper } = getWrapper({ spaces: spaceMocks })
-    await wrapper.find('.spaces-table-btn-action-dropdown').trigger('click')
-    expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
-  })
   it('should show the space details on details button click', async () => {
     const { wrapper } = getWrapper({ spaces: spaceMocks })
 
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 212689170a..ff1a328d87 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
@@ -170,10 +170,11 @@ 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">
-                <!--v-if-->
-              </div>
-            </button></div>
+            </button>
+            <transition-stub name="oc-drop" appear="false" persisted="false" css="true">
+              <!--v-if-->
+            </transition-stub>
+          </div>
         </td>
       </tr>
       <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-tbody-tr oc-tbody-tr-2 border-t h-10.5" data-item-id="2" draggable="false">
@@ -228,10 +229,11 @@ 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">
-                <!--v-if-->
-              </div>
-            </button></div>
+            </button>
+            <transition-stub name="oc-drop" appear="false" persisted="false" css="true">
+              <!--v-if-->
+            </transition-stub>
+          </div>
         </td>
       </tr>
     </tbody>
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts
index c5eb4413ae..bccea2371d 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts
@@ -5,14 +5,13 @@ import {
   mount,
   shallowMount
 } from '@opencloud-eu/web-test-helpers'
-import { displayPositionedDropdown, queryItemAsString, useSideBar } from '@opencloud-eu/web-pkg'
+import { queryItemAsString, useSideBar } from '@opencloud-eu/web-pkg'
 import { useUserSettingsStore } from '../../../../src/composables/stores/userSettings'
 import { User } from '@opencloud-eu/web-client/graph/generated'
 
 const getUserMocks = () => [{ id: '1', displayName: 'jan' }] as User[]
 vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
-  displayPositionedDropdown: vi.fn(),
   queryItemAsString: vi.fn()
 }))
 
@@ -93,20 +92,6 @@ describe('UsersList', () => {
       ])
     })
   })
-  it('should show the context menu on right click', async () => {
-    const users = getUserMocks()
-    const spyDisplayPositionedDropdown = vi.mocked(displayPositionedDropdown)
-    const { wrapper } = getWrapper({ mountType: mount, users })
-    await wrapper.find(`[data-item-id="${users[0].id}"]`).trigger('contextmenu')
-    expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
-  })
-  it('should show the context menu on context menu button click', async () => {
-    const users = getUserMocks()
-    const spyDisplayPositionedDropdown = vi.mocked(displayPositionedDropdown)
-    const { wrapper } = getWrapper({ mountType: mount, users })
-    await wrapper.find('.users-table-btn-action-dropdown').trigger('click')
-    expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
-  })
   it('should show the user details on details button click', async () => {
     const users = getUserMocks()
     const { wrapper } = getWrapper({ mountType: mount, users })
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
index fc13cbddd4..3b50a92334 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap
@@ -160,6 +160,9 @@ exports[`Users view > list view > renders list initially 1`] = `
                     <oc-button-stub arialabel="Show details" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="ml-1 quick-action-button p-1 users-table-btn-details"></oc-button-stub>
                     <oc-button-stub arialabel="Edit" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" class="ml-1 quick-action-button p-1 users-table-btn-edit"></oc-button-stub>
                     <oc-button-stub arialabel="Show context menu" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="context-menu-trigger-1" class="quick-action-button ml-1 p-1 users-table-btn-action-dropdown"></oc-button-stub>
+                    <transition-stub name="oc-drop" appear="false" persisted="false" css="true">
+                      <!--v-if-->
+                    </transition-stub>
                   </td>
                 </tr>
               </tbody>
diff --git a/packages/web-app-files/src/components/CreateOrUploadMenu.vue b/packages/web-app-files/src/components/CreateOrUploadMenu.vue
index 64f9b72e97..606f86373a 100644
--- a/packages/web-app-files/src/components/CreateOrUploadMenu.vue
+++ b/packages/web-app-files/src/components/CreateOrUploadMenu.vue
@@ -7,7 +7,6 @@
     mode="click"
     close-on-click
     padding-size="small"
-    :offset="[-10, 0]"
     @show-drop="showDrop"
   >
     <oc-list
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
index dd9a61e342..1059199841 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -39,6 +39,7 @@
     </oc-drop>
     <oc-info-drop
       ref="accessDetailsDrop"
+      :toggle="'#' + editShareBtnId"
       class="share-access-details-drop [&_dl]:grid [&_dl]:gap-x-4 [&_dl]:gap-y-1 [&_dl]:grid-cols-[max-content_auto] [&_dt]:col-start-1 [&_dd]:col-start-2"
       v-bind="{
         title: $gettext('Access details'),
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
index bd0e044546..91bb0ba45e 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
@@ -68,7 +68,6 @@
 </template>
 
 <script lang="ts">
-import get from 'lodash-es/get'
 import { storeToRefs } from 'pinia'
 import RoleItem from '../Shared/RoleItem.vue'
 import { v4 as uuidV4 } from 'uuid'
@@ -87,6 +86,7 @@ import { useAbility, useUserStore } from '@opencloud-eu/web-pkg'
 import { Resource } from '@opencloud-eu/web-client'
 import { useGettext } from 'vue3-gettext'
 import { ShareRole } from '@opencloud-eu/web-client'
+import { OcDrop } from '@opencloud-eu/design-system/components'
 
 export default defineComponent({
   name: 'RoleDropdown',
@@ -236,7 +236,7 @@ export default defineComponent({
   methods: {
     cycleRoles(event: KeyboardEvent) {
       // events only need to be captured if the roleSelect element is visible
-      if (!get(this.$refs.rolesDrop, 'tippy.state.isShown', false)) {
+      if (!(this.$refs.rolesDrop as ComponentPublicInstance<typeof OcDrop>).$el) {
         return
       }
 
diff --git a/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue b/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue
index 5c95b14103..e4fae9e303 100644
--- a/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue
+++ b/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue
@@ -4,17 +4,19 @@
   </div>
   <div v-else>
     <context-action-menu :menu-sections="menuSections" :action-options="actionOptions" />
-    <input
-      id="space-image-upload-input"
-      ref="spaceImageInput"
-      class="absolute left-[-99999px]"
-      type="file"
-      name="file"
-      multiple
-      tabindex="-1"
-      accept="image/jpeg, image/png"
-      @change="showModalImageSpace"
-    />
+    <div class="relative overflow-hidden">
+      <input
+        id="space-image-upload-input"
+        ref="spaceImageInput"
+        class="absolute left-[-99999px]"
+        type="file"
+        name="file"
+        multiple
+        tabindex="-1"
+        accept="image/jpeg, image/png"
+        @change="showModalImageSpace"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/packages/web-app-files/src/components/Spaces/WhitespaceContextMenu.vue b/packages/web-app-files/src/components/Spaces/WhitespaceContextMenu.vue
index d60ed94289..0d89c77733 100644
--- a/packages/web-app-files/src/components/Spaces/WhitespaceContextMenu.vue
+++ b/packages/web-app-files/src/components/Spaces/WhitespaceContextMenu.vue
@@ -1,35 +1,32 @@
 <template>
-  <oc-button
-    id="context-menu-trigger-whitespace"
-    class="size-0 invisible"
-    aria-hidden
-    appearance="raw"
+  <oc-drop
+    ref="drop"
+    drop-id="context-menu-drop-whitespace"
+    mode="manual"
+    close-on-click
+    padding-size="small"
   >
-    <oc-drop
-      drop-id="context-menu-drop-whitespace"
-      toggle="#context-menu-trigger-whitespace"
-      position="bottom-end"
-      mode="click"
-      class="whitespace-context-actions-list"
-      close-on-click
-      padding-size="small"
-    >
-      <oc-list>
-        <action-menu-item
-          v-for="(action, actionIndex) in menuItemsActions"
-          :key="`section-${action.name}-action-${actionIndex}`"
-          :action="action"
-          :action-options="actionOptions"
-          :data-testid="`whitespace-context-menu-item-${action.name}`"
-        />
-      </oc-list>
-    </oc-drop>
-  </oc-button>
+    <oc-list>
+      <action-menu-item
+        v-for="(action, actionIndex) in menuItemsActions"
+        :key="`section-${action.name}-action-${actionIndex}`"
+        :action="action"
+        :action-options="actionOptions"
+        :data-testid="`whitespace-context-menu-item-${action.name}`"
+      />
+    </oc-list>
+  </oc-drop>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType, unref } from 'vue'
-import { useGettext } from 'vue3-gettext'
+<script setup lang="ts">
+import {
+  ComponentPublicInstance,
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  unref,
+  useTemplateRef
+} from 'vue'
 import {
   useFileActionsPaste,
   useFileActionsShowDetails,
@@ -39,41 +36,47 @@ import { useFileActionsCreateNewFolder } from '@opencloud-eu/web-pkg'
 import { SpaceResource } from '@opencloud-eu/web-client'
 import { ActionMenuItem } from '@opencloud-eu/web-pkg'
 import { storeToRefs } from 'pinia'
+import { OcDrop } from '@opencloud-eu/design-system/components'
+
+const { space } = defineProps<{ space: SpaceResource }>()
 
-export default defineComponent({
-  name: 'WhitespaceContextMenu',
-  components: { ActionMenuItem },
-  props: {
-    space: {
-      type: Object as PropType<SpaceResource>,
-      required: false,
-      default: null
-    }
-  },
-  setup(props) {
-    const { $gettext } = useGettext()
-    const resourcesStore = useResourcesStore()
-    const { currentFolder } = storeToRefs(resourcesStore)
+const drop = useTemplateRef<ComponentPublicInstance<typeof OcDrop>>('drop')
+const resourcesStore = useResourcesStore()
+const { currentFolder } = storeToRefs(resourcesStore)
 
-    const space = computed(() => props.space)
-    const contextMenuLabel = computed(() => $gettext('Show context menu'))
-    const actionOptions = computed(() => ({
-      space: unref(space),
-      resources: [currentFolder.value]
-    }))
-    const { actions: createNewFolderAction } = useFileActionsCreateNewFolder({ space })
-    const { actions: showDetailsAction } = useFileActionsShowDetails()
-    const { actions: pasteAction } = useFileActionsPaste()
+const actionOptions = computed(() => ({
+  space: unref(space),
+  resources: [currentFolder.value]
+}))
+const { actions: createNewFolderAction } = useFileActionsCreateNewFolder({
+  space: computed(() => space)
+})
+const { actions: showDetailsAction } = useFileActionsShowDetails()
+const { actions: pasteAction } = useFileActionsPaste()
 
-    const menuItemsActions = computed(() => {
-      return [
-        ...unref(createNewFolderAction),
-        ...unref(pasteAction),
-        ...unref(showDetailsAction)
-      ].filter((item) => item.isVisible(unref(actionOptions)))
-    })
+const menuItemsActions = computed(() => {
+  return [
+    ...unref(createNewFolderAction),
+    ...unref(pasteAction),
+    ...unref(showDetailsAction)
+  ].filter((item) => item.isVisible(unref(actionOptions)))
+})
 
-    return { contextMenuLabel, actionOptions, currentFolder, menuItemsActions }
+const hanldeContextMenu = (event: Event) => {
+  const { target } = event
+  if ((target as HTMLElement).closest('.has-item-context-menu')) {
+    return
   }
+  event.preventDefault()
+  unref(drop)?.show({ event, useMouseAnchor: true })
+}
+
+let filesViewWrapper: Element | undefined
+onMounted(() => {
+  filesViewWrapper = document.getElementsByClassName('files-view-wrapper')[0]
+  filesViewWrapper?.addEventListener('contextmenu', hanldeContextMenu)
+})
+onBeforeUnmount(() => {
+  filesViewWrapper?.removeEventListener('contextmenu', hanldeContextMenu)
 })
 </script>
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 087c52facb..e1fe52959b 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex w-full">
-    <whitespace-context-menu ref="whitespaceContextMenu" :space="space" />
+    <whitespace-context-menu :space="space" />
     <files-view-wrapper>
       <app-bar
         :breadcrumbs="breadcrumbs"
@@ -107,16 +107,7 @@
 <script lang="ts">
 import { omit, last } from 'lodash-es'
 import { basename } from 'path'
-import {
-  computed,
-  ComponentPublicInstance,
-  defineComponent,
-  PropType,
-  onBeforeUnmount,
-  onMounted,
-  unref,
-  ref
-} from 'vue'
+import { computed, defineComponent, PropType, onBeforeUnmount, onMounted, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Resource } from '@opencloud-eu/web-client'
 import {
@@ -148,7 +139,6 @@ import {
   createFileRouteOptions,
   createLocationPublic,
   createLocationSpaces,
-  displayPositionedDropdown,
   useBreadcrumbsFromPath,
   useClientService,
   useDocumentTitle,
@@ -461,31 +451,12 @@ export default defineComponent({
           performLoaderTask(true, path, fileId)
         }
       )
-      const filesViewWrapper = document.getElementsByClassName('files-view-wrapper')[0]
-      filesViewWrapper?.addEventListener('contextmenu', (event) => {
-        const { target } = event
-        if ((target as HTMLElement).closest('.has-item-context-menu')) {
-          return
-        }
-        event.preventDefault()
-        const newEvent = new MouseEvent('contextmenu', event)
-        showContextMenu(newEvent)
-      })
     })
 
     onBeforeUnmount(() => {
       eventBus.unsubscribe('app.files.list.load', loadResourcesEventToken)
     })
 
-    const whitespaceContextMenu = ref<ComponentPublicInstance<typeof WhitespaceContextMenu>>(null)
-    const showContextMenu = (event: MouseEvent) => {
-      displayPositionedDropdown(
-        unref(whitespaceContextMenu).$el._tippy,
-        event,
-        unref(whitespaceContextMenu)
-      )
-    }
-
     const createNewFolderAction = computed(() => unref(createNewFolder)[0].handler)
 
     const fileDropped = async (fileTarget: string | { name: string; path: string }) => {
@@ -556,7 +527,6 @@ export default defineComponent({
       uploadHint: computed(() =>
         $gettext('Drag files and folders here or use the "New" or "Upload" buttons to add files')
       ),
-      whitespaceContextMenu,
       createNewFolderAction,
       currentFolder,
       totalResourcesCount,
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
index bfacdf85e0..cebe1398cc 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
@@ -23,7 +23,7 @@ exports[`SharesNavigation component > renders a shares navigation for both mobil
     <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="shares_navigation_mobile" class="p-1"><span>Shared with me</span>
       <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-drop-down" size="medium" type="span"></oc-icon-stub>
     </oc-button-stub>
-    <oc-drop-stub title="Navigation" closeonclick="true" dropid="oc-drop-1" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#shares_navigation_mobile" enforcedroponmobile="false">
+    <oc-drop-stub title="Navigation" closeonclick="true" dropid="oc-drop-1" mode="click" offset="5" paddingsize="small" position="bottom-start" toggle="#shares_navigation_mobile" enforcedroponmobile="false">
       <oc-list-stub raw="false">
         <li>
           <oc-button-stub to="/files/shares/with-me/" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="bg-role-secondary-container">
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 53c779b180..f2ef5dd3f3 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
@@ -43,7 +43,6 @@ describe('RoleDropdown', () => {
   })
   it('emits "optionChange"-event on role click', async () => {
     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/SideBar/Shares/Links/CopyLink.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/CopyLink.spec.ts
index edbe8b0372..c63e265177 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/CopyLink.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/CopyLink.spec.ts
@@ -20,8 +20,6 @@ vi.mock('@vueuse/core', () => ({
 }))
 
 describe('CopyLink', () => {
-  // ignore tippy warning
-  vi.spyOn(console, 'warn').mockImplementation(undefined)
   it('upon clicking it should copy the link to the clipboard, render a success message and change icon for half a second', async () => {
     const copyMock = vi.fn()
     const copiedRef = ref(true)
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 0f10ddc357..aba3ba94b1 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
@@ -18,9 +18,9 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
       return svg;
     }" 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]">
+        <transition-stub name="oc-drop" appear="false" persisted="false" css="true" options="[object Object]">
           <!--v-if-->
-        </div>
+        </transition-stub>
       </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-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
@@ -59,9 +59,9 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
       return svg;
     }" 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]">
+        <transition-stub name="oc-drop" appear="false" persisted="false" css="true" options="[object Object]">
           <!--v-if-->
-        </div>
+        </transition-stub>
       </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-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
@@ -102,9 +102,9 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
       return svg;
     }" 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]">
+        <transition-stub name="oc-drop" appear="false" persisted="false" css="true" options="[object Object]">
           <!--v-if-->
-        </div>
+        </transition-stub>
       </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-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" transform-source="(svg) => {
diff --git a/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap b/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap
index c3343dadbe..e4556f8389 100644
--- a/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/__snapshots__/CreateOrUploadMenu.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CreateOrUploadMenu component > action buttons > should show and be enabled if file creation is possible 1`] = `
-"<oc-drop-stub title="New" closeonclick="true" dropid="create-or-upload-drop" isnestedelement="false" mode="click" offset="-10,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#test-toggle" enforcedroponmobile="false" class="w-auto min-w-3xs">
+"<oc-drop-stub title="New" closeonclick="true" dropid="create-or-upload-drop" mode="click" offset="5" paddingsize="small" position="bottom-start" toggle="#test-toggle" enforcedroponmobile="false" class="w-auto min-w-3xs">
   <oc-list-stub raw="false" id="create-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
     <li>
       <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="new-folder-btn" class="w-full">
@@ -44,7 +44,7 @@ exports[`CreateOrUploadMenu component > action buttons > should show and be enab
 `;
 
 exports[`CreateOrUploadMenu component > file handlers > should show entries for all new file handlers 1`] = `
-"<oc-drop-stub title="New" closeonclick="true" dropid="create-or-upload-drop" isnestedelement="false" mode="click" offset="-10,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#test-toggle" enforcedroponmobile="false" class="w-auto min-w-3xs">
+"<oc-drop-stub title="New" closeonclick="true" dropid="create-or-upload-drop" mode="click" offset="5" paddingsize="small" position="bottom-start" toggle="#test-toggle" enforcedroponmobile="false" class="w-auto min-w-3xs">
   <oc-list-stub raw="false" id="create-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
     <li>
       <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="button" nohover="false" id="new-folder-btn" class="w-full">
diff --git a/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts b/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts
index c4959bb1b3..d0499cc3f4 100644
--- a/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts
@@ -161,15 +161,6 @@ describe('GenericSpace view', () => {
       expect(wrapper.find('.file-empty-upload-hint').exists()).toBeFalsy()
     })
   })
-  describe('whitespace context menu', () => {
-    it('shows whitespace context menu on right click in whitespace', async () => {
-      const { wrapper } = getMountedWrapper()
-      await wrapper.vm.loadResourcesTask.last
-      await wrapper.find('#files-view').trigger('contextmenu')
-      await wrapper.vm.$nextTick()
-      expect(wrapper.vm.whitespaceContextMenu).toBeDefined()
-    })
-  })
   describe('for a single file', () => {
     describe('on EOS for single shared resources', () => {
       it('renders the ResourceDetails component if no currentFolder id is present', () => {
diff --git a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
index ebe15d783d..5dd10e06a1 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
@@ -24,7 +24,6 @@ import { flushPromises } from '@vue/test-utils'
 
 vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
-  displayPositionedDropdown: vi.fn(),
   queryItemAsString: vi.fn(),
   appDefaults: vi.fn(),
   useRouteQueryPersisted: vi.fn().mockImplementation(() => ref('resource-table')),
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index d5bbed824c..fbd0c75d68 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -52,6 +52,7 @@
       v-if="showDrop"
       id="files-global-search-options"
       ref="optionsDropRef"
+      toggle="#files-global-search-bar"
       mode="manual"
       target="#files-global-search-bar"
       class="w-[93vw] sm:w-2xs md:w-lg overflow-y-auto"
@@ -189,7 +190,7 @@ export default defineComponent({
         return
       }
 
-      const optionDropVisible = !!document.querySelector('.tippy-box[data-state="visible"]')
+      const optionDropVisible = !!document.querySelector('#files-global-search-options')
 
       if (!unref(isMobileWidth)) {
         searchBarEl.style.visibility = 'visible'
diff --git a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
index 5695e5fd51..dd4bce02f9 100644
--- a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
+++ b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
@@ -55,8 +55,6 @@ const selectors = {
   providerListItem: '.provider',
   providerDisplayName: '.provider .display-name',
   providerMoreResultsLink: '.provider .more-results',
-  optionsHidden: '.tippy-box[data-state="hidden"]',
-  optionsVisible: '.tippy-box[data-state="visible"]',
   searchFilters: '#files-global-search-filter'
 }
 
diff --git a/packages/web-pkg/src/components/ContextActions/ActionMenuDropItem.vue b/packages/web-pkg/src/components/ContextActions/ActionMenuDropItem.vue
index f7fbe215a2..771ec6fd27 100644
--- a/packages/web-pkg/src/components/ContextActions/ActionMenuDropItem.vue
+++ b/packages/web-pkg/src/components/ContextActions/ActionMenuDropItem.vue
@@ -20,11 +20,10 @@
       :title="menuSectionDrop.label"
       :drop-id="dropId"
       :toggle="`#${toggleId}`"
-      :is-nested-element="true"
       mode="hover"
       class="w-3xs oc-files-context-action-drop"
       padding-size="small"
-      position="auto-start"
+      position="bottom-start"
       close-on-click
     >
       <template v-if="menuSectionDrop.items.length">
diff --git a/packages/web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue b/packages/web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue
index d87f7e1e8b..8cc61388a7 100644
--- a/packages/web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue
+++ b/packages/web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue
@@ -6,33 +6,30 @@
     :aria-label="contextMenuLabel"
     appearance="raw"
     class="quick-action-button ml-1 p-1"
-    @click.stop.prevent="
-      $emit('quickActionClicked', {
-        event: $event,
-        dropdown: $refs[`context-menu-drop-ref-${resourceDomSelector(item)}`]
-      })
-    "
+    :class="$attrs.class"
+    @click="$emit('quickActionClicked', $event)"
   >
     <oc-icon name="more-2" />
-    <oc-drop
-      :ref="`context-menu-drop-ref-${resourceDomSelector(item)}`"
-      :drop-id="`context-menu-drop-${resourceDomSelector(item)}`"
-      :toggle="`#context-menu-trigger-${resourceDomSelector(item)}`"
-      :title="title"
-      position="bottom-end"
-      mode="click"
-      padding-size="small"
-      close-on-click
-    >
-      <slot name="contextMenu" :item="item" />
-    </oc-drop>
   </oc-button>
+  <oc-drop
+    ref="drop"
+    :drop-id="`context-menu-drop-${resourceDomSelector(item)}`"
+    :toggle="`#context-menu-trigger-${resourceDomSelector(item)}`"
+    :title="title"
+    position="left-start"
+    mode="manual"
+    padding-size="small"
+    close-on-click
+  >
+    <slot name="contextMenu" :item="item" />
+  </oc-drop>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ComponentPublicInstance, computed, useTemplateRef } from 'vue'
 import { extractDomSelector, Resource } from '@opencloud-eu/web-client'
 import { useGettext } from 'vue3-gettext'
+import { OcDrop } from '@opencloud-eu/design-system/components'
 
 const {
   item,
@@ -45,9 +42,12 @@ const {
 }>()
 
 defineEmits<{
-  (e: 'quickActionClicked', payload: { event: MouseEvent; dropdown: any }): void
+  (e: 'quickActionClicked', event: MouseEvent | KeyboardEvent): void
 }>()
 
 const { $gettext } = useGettext()
+const drop = useTemplateRef<ComponentPublicInstance<typeof OcDrop>>('drop')
+defineExpose({ drop })
+
 const contextMenuLabel = computed(() => $gettext('Show context menu'))
 </script>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index f3172cf24a..262b8bcea3 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -27,7 +27,9 @@
     :lazy="lazy"
     padding-x="medium"
     @highlight="fileContainerClicked({ resource: $event[0], event: $event[1] })"
-    @contextmenu-clicked="(el, event, item) => showContextMenuOnRightClick(event, item)"
+    @contextmenu-clicked="
+      (el, event, item) => showContextMenuOnRightClick(event, item, contextMenuDrops[item.id])
+    "
     @item-dropped="fileDropped($event[0], $event[1])"
     @item-dragged="dragStart($event[0], $event[1])"
     @drop-row-styling="setDropStyling"
@@ -114,7 +116,6 @@
       <slot name="additionalResourceContent" :resource="item" />
     </template>
     <template #syncEnabled="{ item }">
-      <!-- @slot syncEnabled column -->
       <slot name="syncEnabled" :resource="item" />
     </template>
     <template #size="{ item }">
@@ -239,11 +240,17 @@
       >
         <slot name="quickActions" :resource="item" />
         <context-menu-quick-action
+          :ref="
+            (el) =>
+              (contextMenuDrops[item.id] = (
+                el as ComponentPublicInstance<typeof ContextMenuQuickAction>
+              )?.drop)
+          "
           :title="item.name"
           :item="item"
           :resource-dom-selector="resourceDomSelector"
           class="resource-table-btn-action-dropdown"
-          @quick-action-clicked="showContextMenuOnBtnClick($event, item)"
+          @quick-action-clicked="showContextMenuOnBtnClick($event, item, contextMenuDrops[item.id])"
         >
           <template #contextMenu>
             <slot name="contextMenu" :resource="item" />
@@ -261,7 +268,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, unref } from 'vue'
+import { ComponentPublicInstance, computed, ref, unref } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 import {
   extractDomSelector,
@@ -299,7 +306,7 @@ import { FileActionOptions, useFileActionsRename } from '../../composables/actio
 import { createLocationCommon } from '../../router'
 import get from 'lodash-es/get'
 import { storeToRefs } from 'pinia'
-import { OcButton, OcSpinner, OcTable } from '@opencloud-eu/design-system/components'
+import { OcButton, OcDrop, OcSpinner, OcTable } from '@opencloud-eu/design-system/components'
 import { FieldType, SortDir } from '@opencloud-eu/design-system/helpers'
 import ResourceStatusIndicators from './ResourceStatusIndicators.vue'
 import { useGettext } from 'vue3-gettext'
@@ -434,6 +441,8 @@ const { actions: renameActionsSpace } = useSpaceActionsRename()
 const renameHandler = computed(() => unref(renameActions)[0].handler)
 const renameHandlerSpace = computed(() => unref(renameActionsSpace)[0].handler)
 
+const contextMenuDrops = ref<Record<string, ComponentPublicInstance<typeof OcDrop>>>({})
+
 const getTagToolTip = (tag: string) => $gettext(`Search for tag %{tag}`, { tag })
 
 const fields = computed(() => {
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
index b5a048d1a0..c2168cff3e 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -64,7 +64,9 @@
           :lazy="areTilesLazy"
           :is-loading="isResourceInDeleteQueue(resource.id)"
           :class="{ 'opacity-60': isResourceCut(resource) }"
-          @contextmenu="showContextMenuOnRightClick($event, resource)"
+          @contextmenu="
+            showContextMenuOnRightClick($event, resource, contextMenuDrops[resource.id])
+          "
           @file-name-clicked.stop="(event) => fileNameClicked({ resource, event })"
           @dragstart="dragStart(resource, $event)"
           @dragenter.prevent="setDropStyling(resource, false, $event)"
@@ -106,10 +108,18 @@
           <template #contextMenu>
             <context-menu-quick-action
               v-if="shouldShowContextDrop(resource)"
+              :ref="
+                (el) =>
+                  (contextMenuDrops[resource.id] = (
+                    el as ComponentPublicInstance<typeof ContextMenuQuickAction>
+                  )?.drop)
+              "
               :item="resource"
               :title="resource.name"
               class="resource-tiles-btn-action-dropdown"
-              @quick-action-clicked="showContextMenuOnBtnClick($event, resource)"
+              @quick-action-clicked="
+                showContextMenuOnBtnClick($event, resource, contextMenuDrops[resource.id])
+              "
             >
               <template #contextMenu>
                 <slot name="contextMenu" :resource="resource" />
@@ -138,7 +148,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, unref, watch } from 'vue'
+import {
+  ComponentPublicInstance,
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  unref,
+  watch
+} from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
 import { ContextMenuQuickAction } from '../ContextActions'
@@ -158,6 +176,7 @@ import {
 import { SizeType, SortDir } from '@opencloud-eu/design-system/helpers'
 import ResourceStatusIndicators from './ResourceStatusIndicators.vue'
 import { storeToRefs } from 'pinia'
+import { OcDrop } from '@opencloud-eu/design-system/components'
 
 const {
   resources = [],
@@ -243,6 +262,8 @@ const {
   emit
 })
 
+const contextMenuDrops = ref<Record<string, ComponentPublicInstance<typeof OcDrop>>>({})
+
 // Disable lazy loading during E2E tests to avoid having to scroll in tests
 const areTilesLazy = (window as any).__E2E__ === true ? false : lazy
 
diff --git a/packages/web-pkg/src/composables/resources/useResourceViewContextMenu.ts b/packages/web-pkg/src/composables/resources/useResourceViewContextMenu.ts
index f5d9970454..04f4b2c684 100644
--- a/packages/web-pkg/src/composables/resources/useResourceViewContextMenu.ts
+++ b/packages/web-pkg/src/composables/resources/useResourceViewContextMenu.ts
@@ -1,11 +1,10 @@
-import { unref } from 'vue'
+import { ComponentPublicInstance, unref } from 'vue'
 import { isProjectSpaceResource, Resource } from '@opencloud-eu/web-client'
-import { ContextMenuBtnClickEventData, displayPositionedDropdown } from '../../helpers'
-import { useIsMobile } from '@opencloud-eu/design-system/composables'
 import { useInterceptModifierClick } from '../keyboardActions'
 import { useEventBus } from '../eventBus'
 import { useActiveLocation } from '../router'
 import { isLocationTrashActive } from '../../router'
+import { OcDrop } from '@opencloud-eu/design-system/components'
 
 export const useResourceViewContextMenu = ({
   isResourceSelected,
@@ -17,7 +16,6 @@ export const useResourceViewContextMenu = ({
   emit: ReturnType<typeof defineEmits>
 }) => {
   const eventBus = useEventBus()
-  const { isMobile } = useIsMobile()
   const { interceptModifierClick } = useInterceptModifierClick()
 
   const emitSelect = (selectedIds: string[]) => {
@@ -35,59 +33,40 @@ export const useResourceViewContextMenu = ({
     return !isResourceDisabled(item)
   }
 
-  const getContextMenuButtonEl = (item: Resource) => {
-    return document.getElementById(`context-menu-trigger-${item.getDomSelector()}`)
-  }
-
-  const showContextMenuOnBtnClick = (data: ContextMenuBtnClickEventData, item: Resource) => {
-    const { dropdown, event } = data
-
+  const showContextMenuOnBtnClick = (
+    event: MouseEvent | KeyboardEvent,
+    item: Resource,
+    drop: ComponentPublicInstance<typeof OcDrop>
+  ) => {
     if (event instanceof MouseEvent && interceptModifierClick(event, item)) {
       return
     }
 
     if (isResourceDisabled(item)) {
-      return false
-    }
-
-    if (dropdown?.tippy === undefined) {
-      return
-    }
-    const contextButtonEl = getContextMenuButtonEl(item)
-    if (!contextButtonEl) {
       return
     }
-    if (!isResourceSelected(item)) {
-      emitSelect([item.id])
-    }
-    displayPositionedDropdown(dropdown.tippy, event, contextButtonEl)
+
+    drop?.show({ event })
   }
 
-  const showContextMenuOnRightClick = (event: MouseEvent | KeyboardEvent, item: Resource) => {
+  const showContextMenuOnRightClick = (
+    event: MouseEvent | KeyboardEvent,
+    item: Resource,
+    drop: ComponentPublicInstance<typeof OcDrop>
+  ) => {
     if (event instanceof MouseEvent && interceptModifierClick(event, item)) {
       return
     }
     event.preventDefault()
     if (isResourceDisabled(item)) {
-      return false
-    }
-
-    const contextButtonEl = getContextMenuButtonEl(item)
-    if (!contextButtonEl) {
       return
     }
+
     if (!isResourceSelected(item)) {
       emitSelect([item.id])
     }
 
-    if (unref(isMobile)) {
-      // we can't use displayPositionedDropdown() on mobile because we need to open the bottom drawer.
-      // this can be triggered by clicking the context menu button of the current row.
-      contextButtonEl.click()
-      return
-    }
-
-    displayPositionedDropdown((contextButtonEl as any)._tippy, event, contextButtonEl)
+    drop?.show({ event, useMouseAnchor: true })
   }
 
   return {
diff --git a/packages/web-pkg/src/helpers/contextMenuDropdown.ts b/packages/web-pkg/src/helpers/contextMenuDropdown.ts
deleted file mode 100644
index c781fd2e04..0000000000
--- a/packages/web-pkg/src/helpers/contextMenuDropdown.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { OcDrop } from '@opencloud-eu/design-system/components'
-import { ComponentPublicInstance } from 'vue'
-
-export type ContextMenuBtnClickEventData = {
-  event: MouseEvent | KeyboardEvent
-  dropdown: ComponentPublicInstance<typeof OcDrop>
-}
-
-const isKeyboardEvent = (event: Event): event is KeyboardEvent => {
-  return (event as any).clientY === 0
-}
-
-export const displayPositionedDropdown = (
-  dropdown: ComponentPublicInstance<typeof OcDrop>,
-  event: MouseEvent | KeyboardEvent,
-  contextMenuButton: HTMLElement | ComponentPublicInstance<unknown>
-) => {
-  if (!dropdown) {
-    return
-  }
-
-  let contextMenuButtonEl = contextMenuButton
-  if ((contextMenuButtonEl as ComponentPublicInstance<unknown>).$el) {
-    contextMenuButtonEl = (contextMenuButton as ComponentPublicInstance<unknown>).$el
-  }
-  const contextMenuButtonPos = (contextMenuButtonEl as HTMLElement).getBoundingClientRect()
-
-  const yValue = isKeyboardEvent(event)
-    ? (event.target as HTMLElement)?.getBoundingClientRect().top || 0
-    : event.clientY
-
-  dropdown.setProps({
-    getReferenceClientRect: () => ({
-      width: 0,
-      height: 0,
-      top: yValue,
-      bottom: yValue,
-      /**
-       * If event type is 'contextmenu' the trigger was a right click on the table row,
-       * so we render the dropdown at the position of the mouse pointer.
-       * Otherwise we render the dropdown at the position of the three-dot-menu
-       */
-      left:
-        event.type === 'contextmenu' && !isKeyboardEvent(event)
-          ? event.clientX
-          : contextMenuButtonPos.x,
-      right:
-        event.type === 'contextmenu' && !isKeyboardEvent(event)
-          ? event.clientX
-          : contextMenuButtonPos.x
-    })
-  })
-
-  dropdown.show()
-}
diff --git a/packages/web-pkg/src/helpers/index.ts b/packages/web-pkg/src/helpers/index.ts
index 71921519f3..69c9e9863e 100644
--- a/packages/web-pkg/src/helpers/index.ts
+++ b/packages/web-pkg/src/helpers/index.ts
@@ -7,7 +7,6 @@ export * from './ui'
 
 export * from './breadcrumbs'
 export * from './clipboardActions'
-export * from './contextMenuDropdown'
 export * from './datetime'
 export * from './download'
 export * from './filesize'
diff --git a/packages/web-pkg/tests/unit/components/ContextActions/ContextActionMenu.spec.ts b/packages/web-pkg/tests/unit/components/ContextActions/ContextActionMenu.spec.ts
index 3b134b2ed3..11708bcbdf 100644
--- a/packages/web-pkg/tests/unit/components/ContextActions/ContextActionMenu.spec.ts
+++ b/packages/web-pkg/tests/unit/components/ContextActions/ContextActionMenu.spec.ts
@@ -56,7 +56,6 @@ describe('ContextActionMenu component', () => {
     expect(wrapper.html()).toMatchSnapshot()
 
     expect(wrapper.findAll('#oc-files-context-menu > ul').length).toEqual(menuSections.length)
-    expect(wrapper.findAll('.oc-files-context-action-drop').length).toEqual(3)
   })
 })
 
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 493dddc60d..2b7421c7c2 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,7 +21,7 @@ exports[`ActionMenuDropItem component > renders drop menu with actions 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
   </button>
-  <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">
+  <oc-drop-stub title="Actions" closeonclick="true" dropid="oc-files-context-actions-actions-drop-1" mode="hover" offset="5" paddingsize="small" position="bottom-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-->
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 c90a1f08db..8c7dd5adfa 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
@@ -30,9 +30,9 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       return svg;
     }" 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">
+      <transition-stub name="oc-drop" appear="false" persisted="false" css="true" class="w-3xs oc-files-context-action-drop">
         <!--v-if-->
-      </div>
+      </transition-stub>
     </li>
   </ul>
   <ul class="oc-list [&amp;_li]:px-0 pb-2 pt-2 border-b" id="oc-files-context-actions-actions">
@@ -62,9 +62,9 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       return svg;
     }" 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">
+      <transition-stub name="oc-drop" appear="false" persisted="false" css="true" class="w-3xs oc-files-context-action-drop">
         <!--v-if-->
-      </div>
+      </transition-stub>
     </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">
         <!--v-if-->
@@ -86,9 +86,9 @@ exports[`ContextActionMenu component > renders the menu with drop menu items 1`]
       return svg;
     }" 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">
+      <transition-stub name="oc-drop" appear="false" persisted="false" css="true" class="w-3xs oc-files-context-action-drop">
         <!--v-if-->
-      </div>
+      </transition-stub>
     </li>
   </ul>
   <ul class="oc-list [&amp;_li]:px-0 pt-2" id="oc-files-context-actions-sidebar">
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 127b5d9a82..e1bf9287ed 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
@@ -100,8 +100,9 @@ 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">
-    <!--v-if-->
-  </div>
-</button>"
+</button>
+
+<transition-stub name="oc-drop" appear="false" persisted="false" css="true">
+  <!--v-if-->
+</transition-stub>"
 `;
diff --git a/packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts b/packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts
index 647802c0e3..782bd81f1a 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts
+++ b/packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts
@@ -14,7 +14,6 @@ import {
   useCanBeOpenedWithSecureView,
   ResourceIndicator
 } from '../../../../src/composables/resources'
-import { displayPositionedDropdown } from '../../../../src/helpers/contextMenuDropdown'
 import { mock } from 'vitest-mock-extended'
 import { computed } from 'vue'
 import { Identity } from '@opencloud-eu/web-client/graph/generated'
@@ -318,7 +317,7 @@ describe('ResourceTable', () => {
       }
     })
     resourcesWithAllFields.slice(0, -1).forEach((resource) => {
-      ;['.oc-tbody-tr', '#resource-table-select', '#context-menu-drop'].forEach((baseSelector) => {
+      ;['.oc-tbody-tr', '#resource-table-select'].forEach((baseSelector) => {
         expect(
           wrapper.find([baseSelector, 'custom', resource.getDomSelector()].join('-')).exists()
         ).toBeTruthy()
@@ -519,30 +518,24 @@ describe('ResourceTable', () => {
 
   describe('context menu', () => {
     it('emits select event on contextmenu click', async () => {
-      const spyDisplayPositionedDropdown = vi.mocked(displayPositionedDropdown)
       const { wrapper } = getMountedWrapper()
       vi.spyOn(document, 'getElementById').mockImplementation(() => ({}) as HTMLElement)
       await wrapper.find('.oc-tbody-tr').trigger('contextmenu')
       expect(wrapper.emitted('update:selectedIds').length).toBe(1)
-      expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
     })
 
     it('does not emit select event on contextmenu click of disabled resource', async () => {
-      const spyDisplayPositionedDropdown = vi.mocked(displayPositionedDropdown)
       const { wrapper } = getMountedWrapper({ addProcessingResources: true })
       await wrapper.find('.oc-tbody-tr-rainforest').trigger('contextmenu')
       expect(wrapper.emitted('update:selectedIds')).toBeUndefined()
-      expect(spyDisplayPositionedDropdown).not.toHaveBeenCalled()
     })
 
     it('emits select event on clicking the three-dot icon in table row', async () => {
-      const spyDisplayPositionedDropdown = vi.mocked(displayPositionedDropdown)
       const { wrapper } = getMountedWrapper()
       await wrapper
         .find('.oc-table-data-cell-actions .resource-table-btn-action-dropdown')
         .trigger('click')
       expect(wrapper.emitted('update:selectedIds').length).toBe(1)
-      expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
     })
 
     it('does not show the three-dot icon in table row of a disabled resource', () => {
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 6ac7bdcdf0..123e5aee81 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/ResourceTiles.spec.ts
+++ b/packages/web-pkg/tests/unit/components/FilesList/ResourceTiles.spec.ts
@@ -7,7 +7,6 @@ import {
   useCanBeOpenedWithSecureView,
   ResourceIndicator
 } from '../../../../src/composables/resources'
-import { displayPositionedDropdown } from '../../../../src/helpers/contextMenuDropdown'
 import { OcFilterChip } from '@opencloud-eu/design-system/components'
 import { useResourcesStore } from '../../../../src'
 
@@ -210,15 +209,6 @@ describe('ResourceTiles component', () => {
     })
   })
   describe('context menu', () => {
-    it('triggers the positioned dropdown on click', async () => {
-      const spyDisplayPositionedDropdown = vi.mocked(displayPositionedDropdown)
-      const { wrapper } = getWrapper({ props: { resources } })
-      vi.spyOn(document, 'getElementById').mockImplementation(() => ({}) as HTMLElement)
-
-      const btn = wrapper.find('.resource-tiles-btn-action-dropdown')
-      await btn.trigger('click')
-      expect(spyDisplayPositionedDropdown).toHaveBeenCalled()
-    })
     it('does not show for disabled resources', () => {
       const { wrapper } = getWrapper({
         props: { resources: [{ ...resources[0], processing: 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 6c62f73144..79f3f9e763 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
@@ -37,7 +37,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
                 <!-- Slot for indicators !-->
                 <!--v-if-->
                 <!-- Slot for individual actions -->
-                <!-- Slot for contextmenu --> <button data-v-67d39700="" 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 resource-tiles-btn-action-dropdown" id="context-menu-trigger-1" data-test-context-menu-resource-name="Space 1">
+                <!-- Slot for contextmenu --> <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 resource-tiles-btn-action-dropdown" id="context-menu-trigger-1" data-test-context-menu-resource-name="Space 1">
                   <!--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;) {
@@ -48,10 +48,10 @@ 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">
-                    <!--v-if-->
-                  </div>
                 </button>
+                <transition-stub name="oc-drop" appear="false" persisted="false" css="true">
+                  <!--v-if-->
+                </transition-stub>
               </div>
             </div>
             <!--v-if-->
@@ -80,7 +80,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
                 <!-- Slot for indicators !-->
                 <!--v-if-->
                 <!-- Slot for individual actions -->
-                <!-- Slot for contextmenu --> <button data-v-67d39700="" 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 resource-tiles-btn-action-dropdown" id="context-menu-trigger-2" data-test-context-menu-resource-name="Space 2">
+                <!-- Slot for contextmenu --> <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 resource-tiles-btn-action-dropdown" id="context-menu-trigger-2" data-test-context-menu-resource-name="Space 2">
                   <!--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;) {
@@ -91,10 +91,10 @@ 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">
-                    <!--v-if-->
-                  </div>
                 </button>
+                <transition-stub name="oc-drop" appear="false" persisted="false" css="true">
+                  <!--v-if-->
+                </transition-stub>
               </div>
             </div>
             <!--v-if-->
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 08ae5a3641..29a54ea718 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
@@ -22,7 +22,7 @@ exports[`ItemFilter > can use a custom attribute as display name 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
     </oc-button-stub>
-    <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">
+    <oc-drop-stub title="Users" closeonclick="false" dropid="oc-drop-4" mode="click" offset="5" paddingsize="small" 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">
@@ -80,7 +80,7 @@ exports[`ItemFilter > renders all items 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-4"></svg></span>
     </oc-button-stub>
-    <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">
+    <oc-drop-stub title="Users" closeonclick="false" dropid="oc-drop-2" mode="click" offset="5" paddingsize="small" 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">
diff --git a/packages/web-pkg/tests/unit/helpers/contextMenuDropdown.spec.ts b/packages/web-pkg/tests/unit/helpers/contextMenuDropdown.spec.ts
deleted file mode 100644
index b2454dd2fb..0000000000
--- a/packages/web-pkg/tests/unit/helpers/contextMenuDropdown.spec.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { displayPositionedDropdown } from '../../../src/helpers'
-
-describe('displayPositionedDropdown', () => {
-  it('shows the dropdown', () => {
-    const dropdown = { setProps: vi.fn(), show: vi.fn() } as any
-    const ctxMenuBtn = { $el: { getBoundingClientRect: vi.fn() } } as any
-    displayPositionedDropdown(dropdown, {} as MouseEvent, ctxMenuBtn)
-    expect(dropdown.show).toHaveBeenCalled()
-  })
-  it('horizontally positions the drop at the cursor for "contextmenu"-event', () => {
-    const event = { type: 'contextmenu', clientX: 100 } as MouseEvent
-    let dropdownProps = { getReferenceClientRect: vi.fn(() => undefined) }
-    const dropdown = {
-      setProps: vi.fn((props) => {
-        dropdownProps = props
-      }),
-      show: vi.fn()
-    } as any
-    const ctxMenuBtn = { $el: { getBoundingClientRect: vi.fn(() => ({})) } } as any
-    displayPositionedDropdown(dropdown, event, ctxMenuBtn)
-    const data = dropdownProps.getReferenceClientRect()
-    expect(data.left).toEqual(event.clientX)
-    expect(data.right).toEqual(event.clientX)
-  })
-  it('horizontally positions the drop at context menu button if no "contextmenu"-event given', () => {
-    const event = { clientX: 100 } as MouseEvent
-    let dropdownProps = { getReferenceClientRect: vi.fn(() => undefined) }
-    const dropdown = {
-      setProps: vi.fn((props) => {
-        dropdownProps = props
-      }),
-      show: vi.fn()
-    } as any
-    const ctxMenuBtnX = 200
-    const ctxMenuBtn = { $el: { getBoundingClientRect: vi.fn(() => ({ x: ctxMenuBtnX })) } } as any
-    displayPositionedDropdown(dropdown, event, ctxMenuBtn)
-    const data = dropdownProps.getReferenceClientRect()
-    expect(data.left).toEqual(ctxMenuBtnX)
-    expect(data.right).toEqual(ctxMenuBtnX)
-  })
-  it('vertically positions the drop via "clientY" if given', () => {
-    const event = { clientY: 100 } as MouseEvent
-    let dropdownProps = { getReferenceClientRect: vi.fn(() => undefined) }
-    const dropdown = {
-      setProps: vi.fn((props) => {
-        dropdownProps = props
-      }),
-      show: vi.fn()
-    } as any
-    const ctxMenuBtn = { $el: { getBoundingClientRect: vi.fn(() => ({ x: 200 })) } } as any
-    displayPositionedDropdown(dropdown, event, ctxMenuBtn)
-    const { top, bottom } = dropdownProps.getReferenceClientRect()
-    expect(top).toEqual(event.clientY)
-    expect(bottom).toEqual(event.clientY)
-  })
-  it('vertically positions the drop via the context button position if "clientY" is 0', () => {
-    const yPos = 200
-    const event = {
-      clientY: 0,
-      target: { getBoundingClientRect: () => ({ top: yPos }) }
-    } as unknown as MouseEvent
-    let dropdownProps = { getReferenceClientRect: vi.fn(() => undefined) }
-    const dropdown = {
-      setProps: vi.fn((props) => {
-        dropdownProps = props
-      }),
-      show: vi.fn()
-    } as any
-    const ctxMenuBtn = { $el: { getBoundingClientRect: vi.fn(() => ({ x: 200 })) } } as any
-    displayPositionedDropdown(dropdown, event, ctxMenuBtn)
-    const { top, bottom } = dropdownProps.getReferenceClientRect()
-    expect(top).toEqual(yPos)
-    expect(bottom).toEqual(yPos)
-  })
-})
diff --git a/packages/web-pkg/tsconfig.json b/packages/web-pkg/tsconfig.json
index 2daaa29b4c..9450103dda 100644
--- a/packages/web-pkg/tsconfig.json
+++ b/packages/web-pkg/tsconfig.json
@@ -7,8 +7,7 @@
     "paths": {
       "@vue/shared": ["node_modules/@vue/shared/"],
       "@codemirror/autocomplete": ["./node_modules/@codemirror/autocomplete"],
-      "vue/jsx-runtime": ["./node_modules/vue/jsx-runtime"],
-      "@popperjs/core": ["./../design-system/node_modules/@popperjs/core"]
+      "vue/jsx-runtime": ["./node_modules/vue/jsx-runtime"]
     }
   },
 
diff --git a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
index c1264b6ab3..111b413c31 100644
--- a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
@@ -12,7 +12,6 @@
       <oc-icon name="grid" size="large" class="flex" />
     </oc-button>
     <oc-drop
-      ref="menu"
       :title="$gettext('Applications')"
       drop-id="app-switcher-dropdown"
       toggle="#_appSwitcherButton"
@@ -119,11 +118,6 @@ export default defineComponent({
       getAdditionalEventBindings,
       isMenuItemActive
     }
-  },
-  mounted() {
-    this.menu?.tippy?.setProps({
-      onShown: () => this.menu.$el.querySelector('a:first-of-type').focus()
-    })
   }
 })
 </script>
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
index 7c97992976..a2a046a569 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/UserMenu.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`User Menu component > when no quota and email is set > the user menu does not contain a quota 1`] = `
 "<nav aria-label="Account menu">
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
-  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
+  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
       <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span class=""><span class="block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
         <!--v-if--></span>
@@ -27,7 +27,7 @@ exports[`User Menu component > when no quota and email is set > the user menu do
 exports[`User Menu component > when no quota and no email is set > the user menu does not contain a quota 1`] = `
 "<nav aria-label="Account menu">
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
-  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
+  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
       <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span class="py-1"><span class="block">Albert Einstein</span>
         <!--v-if-->
@@ -52,7 +52,7 @@ exports[`User Menu component > when no quota and no email is set > the user menu
 exports[`User Menu component > when quota and no email is set > renders a navigation without email 1`] = `
 "<nav aria-label="Account menu">
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
-  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
+  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
       <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span class="py-1"><span class="block">Albert Einstein</span>
         <!--v-if-->
@@ -77,7 +77,7 @@ exports[`User Menu component > when quota and no email is set > renders a naviga
 exports[`User Menu component > when quota is above 80% and below 90% > renders a warning quota progress bar 1`] = `
 "<nav aria-label="Account menu">
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
-  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
+  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
       <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span class=""><span class="block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
         <quota-information-stub quota="undefined" class="text-sm mt-1"></quota-information-stub></span>
@@ -101,7 +101,7 @@ exports[`User Menu component > when quota is above 80% and below 90% > renders a
 exports[`User Menu component > when quota is above 90% > renders a danger quota progress bar 1`] = `
 "<nav aria-label="Account menu">
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
-  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
+  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
       <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span class=""><span class="block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
         <quota-information-stub quota="undefined" class="text-sm mt-1"></quota-information-stub></span>
@@ -125,7 +125,7 @@ exports[`User Menu component > when quota is above 90% > renders a danger quota
 exports[`User Menu component > when quota is below 80% > renders a primary quota progress bar 1`] = `
 "<nav aria-label="Account menu">
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
-  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
+  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
       <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span class=""><span class="block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
         <quota-information-stub quota="undefined" class="text-sm mt-1"></quota-information-stub></span>
@@ -149,7 +149,7 @@ exports[`User Menu component > when quota is below 80% > renders a primary quota
 exports[`User Menu component > when quota is not defined > renders no percentag of total and no progress bar 1`] = `
 "<nav aria-label="Account menu">
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
-  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
+  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
       <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span class=""><span class="block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
         <quota-information-stub quota="undefined" class="text-sm mt-1"></quota-information-stub></span>
@@ -173,7 +173,7 @@ exports[`User Menu component > when quota is not defined > renders no percentag
 exports[`User Menu component > when quota is unlimited > renders no percentag of total and no progress bar 1`] = `
 "<nav aria-label="Account menu">
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none oc-topbar-avatar oc-topbar-personal-avatar inline-flex justify-center items-center" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-on-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-chrome);">AE</span></span></oc-button-stub>
-  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
+  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
       <li class="flex items-center pl-2 min-h-10.5 gap-4"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 36px; height: 36px; line-height: 36px; background-color: var(--oc-role-chrome); font-size: 14px; font-family: Helvetica, Arial, sans-serif; color: white;" width="36" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: var(--oc-role-on-chrome);">AE</span></span> <span class=""><span class="block">Albert Einstein</span> <span class="text-sm">test@test.de</span>
         <quota-information-stub quota="undefined" class="text-sm mt-1"></quota-information-stub></span>
@@ -199,7 +199,7 @@ exports[`User Menu component > when user is not logged in > renders a navigation
   <oc-button-stub arialabel="My Account" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true" id="_userMenuButton">
     <oc-avatar-item-stub name="User Menu login" icon="user" accessiblelabel="" background="var(--oc-role-surface)" iconcolor="var(--oc-role-on-surface)" iconfilltype="line" iconsize="small" width="32" class="oc-topbar-avatar inline-flex justify-center items-center"></oc-avatar-item-stub>
   </oc-button-stub>
-  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
+  <oc-drop-stub title="Account" closeonclick="true" dropid="account-info-container" mode="click" offset="5" paddingsize="small" position="bottom-start" toggle="#_userMenuButton" enforcedroponmobile="false" class="overflow-hidden">
     <oc-list-stub raw="false" class="user-menu-list">
       <li class="flex items-center">
         <oc-button-stub to="[object Object]" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="left" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" id="oc-topbar-account-manage">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3f08e04694..8d365a252e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -196,9 +196,6 @@ importers:
       '@floating-ui/dom':
         specifier: ^1.7.5
         version: 1.7.5
-      '@popperjs/core':
-        specifier: ^2.11.5
-        version: 2.11.8
       '@vueuse/core':
         specifier: ^14.0.0
         version: 14.2.1(vue@3.5.28(typescript@5.9.3))
@@ -226,9 +223,6 @@ importers:
       portal-vue:
         specifier: ^3.0.0
         version: 3.0.0(patch_hash=ce486dc8fb49b1e3f9b160bfede1dfeb31a492b7e1ea6dc8d10bbee39174cdcb)(vue@3.5.28(typescript@5.9.3))
-      tippy.js:
-        specifier: ^6.3.7
-        version: 6.3.7
       vue-inline-svg:
         specifier: ^4.0.0
         version: 4.0.1(vue@3.5.28(typescript@5.9.3))
@@ -283,7 +277,7 @@ importers:
         version: 0.25.0(rollup@4.57.1)(vite@7.3.1(@types/node@25.2.0)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.3)(yaml@2.8.2))
       vitepress:
         specifier: ^1.6.3
-        version: 1.6.4(@algolia/client-search@5.47.0)(@types/node@25.2.0)(axios@1.13.5)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.2)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.97.3)(search-insights@2.17.3)(typescript@5.9.3)
+        version: 1.6.4(@algolia/client-search@5.47.0)(@types/node@25.2.0)(axios@1.13.5)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.2)(postcss@8.5.6)(sass@1.97.3)(search-insights@2.17.3)(typescript@5.9.3)
       yaml:
         specifier: ^2.3.4
         version: 2.8.2
@@ -2558,9 +2552,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  '@popperjs/core@2.11.8':
-    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
-
   '@remirror/core-constants@3.0.0':
     resolution: {integrity: sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==}
 
@@ -5088,10 +5079,6 @@ packages:
   lodash@4.17.23:
     resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==}
 
-  loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-
   lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
 
@@ -5785,15 +5772,6 @@ packages:
   randomfill@1.0.4:
     resolution: {integrity: sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==}
 
-  react-dom@18.3.1:
-    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
-    peerDependencies:
-      react: ^18.3.1
-
-  react@18.3.1:
-    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
-    engines: {node: '>=0.10.0'}
-
   read-installed-packages@2.0.1:
     resolution: {integrity: sha512-t+fJOFOYaZIjBpTVxiV8Mkt7yQyy4E6MSrrnt5FmPd4enYvpU/9DYGirDmN1XQwkfeuWIhM/iu0t2rm6iSr0CA==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -5964,9 +5942,6 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  scheduler@0.23.2:
-    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
-
   screenfull@6.0.2:
     resolution: {integrity: sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==}
     engines: {node: ^14.13.1 || >=16.0.0}
@@ -6243,9 +6218,6 @@ packages:
     resolution: {integrity: sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==}
     engines: {node: '>=14.0.0'}
 
-  tippy.js@6.3.7:
-    resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
-
   to-buffer@1.2.2:
     resolution: {integrity: sha512-db0E3UJjcFhpDhAF4tLo03oli3pwl3dbnzXOUIlRKrp+ldk/VUxzpWYZENsw2SZiuBjHAk7DfB0VU7NKdpb6sw==}
     engines: {node: '>= 0.4'}
@@ -8054,9 +8026,9 @@ snapshots:
 
   '@docsearch/css@3.8.2': {}
 
-  '@docsearch/js@3.8.2(@algolia/client-search@5.47.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
+  '@docsearch/js@3.8.2(@algolia/client-search@5.47.0)(search-insights@2.17.3)':
     dependencies:
-      '@docsearch/react': 3.8.2(@algolia/client-search@5.47.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)
+      '@docsearch/react': 3.8.2(@algolia/client-search@5.47.0)(search-insights@2.17.3)
       preact: 10.28.3
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -8065,15 +8037,13 @@ snapshots:
       - react-dom
       - search-insights
 
-  '@docsearch/react@3.8.2(@algolia/client-search@5.47.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)':
+  '@docsearch/react@3.8.2(@algolia/client-search@5.47.0)(search-insights@2.17.3)':
     dependencies:
       '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.47.0)(algoliasearch@5.47.0)(search-insights@2.17.3)
       '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.47.0)(algoliasearch@5.47.0)
       '@docsearch/css': 3.8.2
       algoliasearch: 5.47.0
     optionalDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
       search-insights: 2.17.3
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -8569,8 +8539,6 @@ snapshots:
     dependencies:
       playwright: 1.58.2
 
-  '@popperjs/core@2.11.8': {}
-
   '@remirror/core-constants@3.0.0': {}
 
   '@rolldown/pluginutils@1.0.0-rc.2': {}
@@ -11264,11 +11232,6 @@ snapshots:
 
   lodash@4.17.23: {}
 
-  loose-envify@1.4.0:
-    dependencies:
-      js-tokens: 4.0.0
-    optional: true
-
   lower-case@2.0.2:
     dependencies:
       tslib: 2.8.1
@@ -12030,18 +11993,6 @@ snapshots:
       randombytes: 2.1.0
       safe-buffer: 5.2.1
 
-  react-dom@18.3.1(react@18.3.1):
-    dependencies:
-      loose-envify: 1.4.0
-      react: 18.3.1
-      scheduler: 0.23.2
-    optional: true
-
-  react@18.3.1:
-    dependencies:
-      loose-envify: 1.4.0
-    optional: true
-
   read-installed-packages@2.0.1:
     dependencies:
       '@npmcli/fs': 3.1.1
@@ -12237,11 +12188,6 @@ snapshots:
     optionalDependencies:
       '@parcel/watcher': 2.5.6
 
-  scheduler@0.23.2:
-    dependencies:
-      loose-envify: 1.4.0
-    optional: true
-
   screenfull@6.0.2: {}
 
   scule@1.3.0: {}
@@ -12511,10 +12457,6 @@ snapshots:
 
   tinyrainbow@3.0.3: {}
 
-  tippy.js@6.3.7:
-    dependencies:
-      '@popperjs/core': 2.11.8
-
   to-buffer@1.2.2:
     dependencies:
       isarray: 2.0.5
@@ -12820,10 +12762,10 @@ snapshots:
       sass: 1.97.3
       yaml: 2.8.2
 
-  vitepress@1.6.4(@algolia/client-search@5.47.0)(@types/node@25.2.0)(axios@1.13.5)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.2)(postcss@8.5.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.97.3)(search-insights@2.17.3)(typescript@5.9.3):
+  vitepress@1.6.4(@algolia/client-search@5.47.0)(@types/node@25.2.0)(axios@1.13.5)(fuse.js@7.1.0)(jwt-decode@4.0.0)(lightningcss@1.30.2)(postcss@8.5.6)(sass@1.97.3)(search-insights@2.17.3)(typescript@5.9.3):
     dependencies:
       '@docsearch/css': 3.8.2
-      '@docsearch/js': 3.8.2(@algolia/client-search@5.47.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3)
+      '@docsearch/js': 3.8.2(@algolia/client-search@5.47.0)(search-insights@2.17.3)
       '@iconify-json/simple-icons': 1.2.69
       '@shikijs/core': 2.5.0
       '@shikijs/transformers': 2.5.0

From 8b822c9e489b6db6fd670b5c7e3250675d33c0c6 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Wed, 18 Feb 2026 18:13:23 +0100
Subject: [PATCH 3/6] refactor(files): remove role dropdown arrow cycling

We don't use this for other drop menus and it was broken for public links anyways.
---
 .../Shares/Collaborators/RoleDropdown.vue     | 84 +------------------
 1 file changed, 1 insertion(+), 83 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
index 91bb0ba45e..5d8f5565b8 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
@@ -28,7 +28,6 @@
     </div>
     <oc-drop
       v-if="availableRoles.length > 1"
-      ref="rolesDrop"
       :title="$gettext('Role')"
       :toggle="'#' + roleButtonId"
       mode="click"
@@ -43,7 +42,6 @@
         <li v-for="role in availableRoles" :key="role.id">
           <oc-button
             :id="`files-recipient-role-drop-btn-${role.id}`"
-            ref="roleSelect"
             class="files-recipient-role-drop-btn p-2"
             :class="{
               selected: isSelectedRole(role)
@@ -71,22 +69,11 @@
 import { storeToRefs } from 'pinia'
 import RoleItem from '../Shared/RoleItem.vue'
 import { v4 as uuidV4 } from 'uuid'
-import {
-  defineComponent,
-  inject,
-  PropType,
-  ComponentPublicInstance,
-  computed,
-  ref,
-  unref,
-  Ref,
-  watch
-} from 'vue'
+import { defineComponent, inject, PropType, computed, ref, unref, Ref, watch } from 'vue'
 import { useAbility, useUserStore } from '@opencloud-eu/web-pkg'
 import { Resource } from '@opencloud-eu/web-client'
 import { useGettext } from 'vue3-gettext'
 import { ShareRole } from '@opencloud-eu/web-client'
-import { OcDrop } from '@opencloud-eu/design-system/components'
 
 export default defineComponent({
   name: 'RoleDropdown',
@@ -223,75 +210,6 @@ export default defineComponent({
     inviteLabel() {
       return this.$gettext(this.selectedRole?.displayName || '')
     }
-  },
-
-  beforeUnmount() {
-    window.removeEventListener('keydown', this.cycleRoles)
-  },
-
-  mounted() {
-    window.addEventListener('keydown', this.cycleRoles)
-  },
-
-  methods: {
-    cycleRoles(event: KeyboardEvent) {
-      // events only need to be captured if the roleSelect element is visible
-      if (!(this.$refs.rolesDrop as ComponentPublicInstance<typeof OcDrop>).$el) {
-        return
-      }
-
-      const { code } = event
-      const isArrowUp = code === 'ArrowUp'
-      const isArrowDown = code === 'ArrowDown'
-
-      // to cycle through the list of roles only up and down keyboard events are allowed
-      // if this is not the case we can return early and stop the script execution from here
-      if (!isArrowUp && !isArrowDown) {
-        return
-      }
-
-      // if there is only 1 or no roleSelect we can early return
-      // it does not make sense to cycle through it if value is less than 1
-      const roleSelect = (this.$refs.roleSelect as ComponentPublicInstance[]) || []
-
-      if (roleSelect.length <= 1) {
-        return
-      }
-
-      // obtain active role select in following priority chain:
-      // first try to get the focused select
-      // then try to get the selected select
-      // and if none of those applies we fall back to the first role select
-      const activeRoleSelect =
-        roleSelect.find((rs) => rs.$el === document.activeElement) ||
-        roleSelect.find((rs) => rs.$el.classList.contains('selected')) ||
-        roleSelect[0]
-      const activeRoleSelectIndex = roleSelect.indexOf(activeRoleSelect)
-      const activateRoleSelect = (idx: number) => roleSelect[idx].$el.focus()
-
-      // if the event key is arrow up
-      // and the next active role select index would be less than 0
-      // then activate the last available role select
-      if (isArrowUp && activeRoleSelectIndex - 1 < 0) {
-        activateRoleSelect(roleSelect.length - 1)
-
-        return
-      }
-
-      // if the event key is arrow down
-      // and the next active role select index would be greater or even to the available amount of role selects
-      // then activate the first available role select
-      if (isArrowDown && activeRoleSelectIndex + 1 >= roleSelect.length) {
-        activateRoleSelect(0)
-
-        return
-      }
-
-      // the only missing part is to navigate up or down, this only happens if:
-      // the next active role index is greater than 0
-      // the next active role index is less than the amount of all available role selects
-      activateRoleSelect(activeRoleSelectIndex + (isArrowUp ? -1 : 1))
-    }
   }
 })
 </script>

From f915a11b37357a0f18f4839eab7efcd75caac8b0 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Thu, 19 Feb 2026 09:53:27 +0100
Subject: [PATCH 4/6] fix(files): move create share options drop outside of
 button

---
 .../InviteCollaboratorForm.vue                | 41 +++++++++----------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
index 916e0971ca..3a4635ae91 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
@@ -114,29 +114,26 @@
           appearance="raw"
         >
           <oc-icon name="more-2" />
-          <oc-drop
-            ref="showMoreShareOptionsDropRef"
-            :title="$gettext('Share options')"
-            :drop-id="'show-more-share-options-drop'"
-            :toggle="'#show-more-share-options-btn'"
-            close-on-click
-            mode="click"
-            padding-size="small"
-          >
-            <oc-list
-              class="collaborator-edit-dropdown-options-list"
-              :aria-label="'shareEditOptions'"
-            >
-              <li>
-                <expiration-datepicker
-                  v-if="!saving"
-                  :share-types="selectedCollaborators.map(({ shareType }) => shareType)"
-                  @option-change="collaboratorExpiryChanged"
-                />
-              </li>
-            </oc-list>
-          </oc-drop>
         </oc-button>
+        <oc-drop
+          ref="showMoreShareOptionsDropRef"
+          :title="$gettext('Share options')"
+          :drop-id="'show-more-share-options-drop'"
+          :toggle="'#show-more-share-options-btn'"
+          close-on-click
+          mode="click"
+          padding-size="small"
+        >
+          <oc-list class="collaborator-edit-dropdown-options-list" :aria-label="'shareEditOptions'">
+            <li>
+              <expiration-datepicker
+                v-if="!saving"
+                :share-types="selectedCollaborators.map(({ shareType }) => shareType)"
+                @option-change="collaboratorExpiryChanged"
+              />
+            </li>
+          </oc-list>
+        </oc-drop>
         <oc-button
           id="new-collaborators-form-create-button"
           key="new-collaborator-save-button"

From 7d7bb8aa9d417af30485b023609b4be1872bff55 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Fri, 20 Feb 2026 10:11:12 +0100
Subject: [PATCH 5/6] test: fix e2e tests after introducing floating-ui

---
 tests/e2e/cucumber/features/a11y/smoke.feature      |  6 +++---
 .../e2e/support/objects/app-files/share/actions.ts  |  6 +-----
 .../support/objects/app-files/share/collaborator.ts | 13 +++----------
 3 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/tests/e2e/cucumber/features/a11y/smoke.feature b/tests/e2e/cucumber/features/a11y/smoke.feature
index 96a0fca15e..d269e9cff5 100644
--- a/tests/e2e/cucumber/features/a11y/smoke.feature
+++ b/tests/e2e/cucumber/features/a11y/smoke.feature
@@ -89,7 +89,7 @@ Feature: Accessibility checks
 
     # search panel
     And "Brian" opens location search panel
-    And "Brian" checks the accessibility of the DOM selector ".tippy-content" on the "search panel"
+    And "Brian" checks the accessibility of the DOM selector ".oc-drop" on the "search panel"
 
     # notifications
     And "Brian" opens notifications dropdown
@@ -154,8 +154,8 @@ Feature: Accessibility checks
     And "Brian" opens the "files" app
     And "Brian" navigates to the projects space page
     And "Brian" checks the accessibility of the DOM selector "#files-view" on the "project spaces page"
-    
-    
+
+
     ## 7. app-sidebar (right sidebar)
     And "Alice" opens the "files" app
     And "Alice" opens the right sidebar of the resource "lorem.txt"
diff --git a/tests/e2e/support/objects/app-files/share/actions.ts b/tests/e2e/support/objects/app-files/share/actions.ts
index bc821cfdd2..c967c91109 100644
--- a/tests/e2e/support/objects/app-files/share/actions.ts
+++ b/tests/e2e/support/objects/app-files/share/actions.ts
@@ -4,7 +4,6 @@ import Collaborator, { ICollaborator, IAccessDetails } from './collaborator'
 import { sidebar } from '../utils'
 import { clickResource } from '../resource/actions'
 import { User } from '../../../types'
-import { locatorUtils } from '../../../utils'
 
 const invitePanel = '#oc-files-sharing-sidebar'
 const quickShareButton =
@@ -88,10 +87,7 @@ export const createShare = async (args: createShareArgs): Promise<void> => {
 
   if (expirationDate) {
     await page.locator(showMoreOptionsButton).click()
-    await Promise.all([
-      locatorUtils.waitForEvent(page.locator(invitePanel), 'transitionend'),
-      page.getByTestId(calendarDatePickerId).click()
-    ])
+    await page.getByTestId(calendarDatePickerId).click()
     await Collaborator.setExpirationDate(page, expirationDate)
   }
   const federatedShare = recipients[0].shareType
diff --git a/tests/e2e/support/objects/app-files/share/collaborator.ts b/tests/e2e/support/objects/app-files/share/collaborator.ts
index fc930967c2..b4b67f85fa 100644
--- a/tests/e2e/support/objects/app-files/share/collaborator.ts
+++ b/tests/e2e/support/objects/app-files/share/collaborator.ts
@@ -2,7 +2,6 @@ import { Page, expect } from '@playwright/test'
 import util from 'util'
 import { Group, User } from '../../../types'
 import { getActualExpiryDate } from '../../../utils/datePicker'
-import { locatorUtils } from '../../../utils'
 
 export interface ICollaborator {
   collaborator: User | Group
@@ -253,15 +252,9 @@ export default class Collaborator {
     await page
       .locator(util.format(Collaborator.collaboratorEditDropdownButton, collaboratorRow))
       .click()
-
-    const panel = page.locator(Collaborator.invitePanel)
-    await Promise.all([
-      locatorUtils.waitForEvent(panel, 'transitionend'),
-      page
-        .locator(util.format(Collaborator.setExpirationDateCollaboratorButton, collaboratorRow))
-        .click()
-    ])
-
+    await page
+      .locator(util.format(Collaborator.setExpirationDateCollaboratorButton, collaboratorRow))
+      .click()
     await Collaborator.setExpirationDate(page, expirationDate)
   }
 

From 82fc531a09f341470fd739240efe5cd31e8389f8 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Fri, 20 Feb 2026 11:43:50 +0100
Subject: [PATCH 6/6] fix: file shortcut menu not opening

---
 .../web-pkg/src/components/CreateShortcutModal.vue    | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/web-pkg/src/components/CreateShortcutModal.vue b/packages/web-pkg/src/components/CreateShortcutModal.vue
index 0810f06d01..2ef6e1e2c0 100644
--- a/packages/web-pkg/src/components/CreateShortcutModal.vue
+++ b/packages/web-pkg/src/components/CreateShortcutModal.vue
@@ -31,6 +31,7 @@
   </oc-text-input>
   <oc-drop
     ref="dropRef"
+    toggle="#create-shortcut-modal-url-input"
     class="w-lg"
     padding-size="remove"
     drop-id="create-shortcut-modal-contextmenu"
@@ -315,7 +316,7 @@ export default defineComponent({
       }
 
       e.stopPropagation()
-      ;(unref(dropRef) as InstanceType<typeof OcDrop>).hide()
+      unref(dropRef).hide()
     }
 
     const onKeyEnterDrop = (e: Event) => {
@@ -334,7 +335,7 @@ export default defineComponent({
         dropItemResourceClicked(unref(searchResult)?.values?.[unref(activeDropItemIndex) - 1])
       }
 
-      ;(unref(dropRef) as InstanceType<typeof OcDrop>).hide()
+      unref(dropRef).hide()
     }
 
     const onHideDrop = () => {
@@ -351,7 +352,7 @@ export default defineComponent({
       const showDrop = inputUrl.value.trim().length
 
       if (showDrop) {
-        ;(unref(dropRef) as InstanceType<typeof OcDrop>).show()
+        unref(dropRef).show()
       }
     }
 
@@ -362,11 +363,11 @@ export default defineComponent({
       const hideDrop = !inputUrl.value.trim().length
 
       if (hideDrop) {
-        ;(unref(dropRef) as InstanceType<typeof OcDrop>).hide()
+        unref(dropRef).hide()
         return
       }
 
-      ;(unref(dropRef) as InstanceType<typeof OcDrop>).show()
+      unref(dropRef).show()
 
       if (!isLocationPublicActive(router, 'files-public-link')) {
         debouncedSearch()