From d7722d01930598d92b555f47b5389c2d89d22257 Mon Sep 17 00:00:00 2001
From: Noah Neukam <38350116+n-nkm@users.noreply.github.com>
Date: Thu, 5 Mar 2026 12:50:04 +0100
Subject: [PATCH] fix(menu): prevent dropdown from closing when cursor crosses
 offset gap (#2367)

---
 frontend/src/components/misc/Dropdown.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/misc/Dropdown.vue b/frontend/src/components/misc/Dropdown.vue
index 579eaba69..f87227b89 100644
--- a/frontend/src/components/misc/Dropdown.vue
+++ b/frontend/src/components/misc/Dropdown.vue
@@ -68,9 +68,11 @@ defineSlots<{
 
 const initialMount = ref(false)
 const open = ref(false)
+
 const dropdown = ref<HTMLElement>()
 const dropdownMenu = ref<HTMLElement>()
 const dropdownPosition = ref({x: 0, y: 0})
+const dropdownMenuOffset = computed(() => 4)
 
 function close() {
 	open.value = false
@@ -87,7 +89,7 @@ async function updatePosition() {
 		placement: 'bottom-end',
 		strategy: 'absolute',
 		middleware: [
-			offset(4),
+			offset(dropdownMenuOffset.value),
 			autoPlacement({
 				allowedPlacements: ['bottom-end', 'top-end', 'bottom-start', 'top-start'],
 				padding: 8,
@@ -102,6 +104,7 @@ async function updatePosition() {
 const dropdownMenuStyle = computed(() => ({
 	left: `${dropdownPosition.value.x}px`,
 	top: `${dropdownPosition.value.y}px`,
+	'--hover-offset': `${dropdownMenuOffset.value}px`,
 }))
 
 function toggleOpen() {
@@ -129,6 +132,12 @@ onClickOutside(dropdown, (e) => {
 	position: relative;
 }
 
+.dropdown-menu::before {
+  content: "";
+  position: absolute;
+  inset: calc(var(--hover-offset) * -1);
+}
+
 .dropdown-menu {
 	min-inline-size: 12rem;
 	position: absolute;