From 2f87bc6a2d237382641ad3f0e7a8df36f0b74c15 Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Tue, 29 Sep 2026 16:49:42 +0200
Subject: [PATCH] fix: keep new-menu submenus open while crossing the gutter
 (#11414)

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/components/home/CreateActionsMenu.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/home/CreateActionsMenu.svelte b/frontend/src/lib/components/home/CreateActionsMenu.svelte
index 7c5bb4986e..34e1de8494 100644
--- a/frontend/src/lib/components/home/CreateActionsMenu.svelte
+++ b/frontend/src/lib/components/home/CreateActionsMenu.svelte
@@ -540,10 +540,13 @@
 							<ChevronRight size={14} class="shrink-0 text-tertiary" />
 						</button>
 						{#if $wacSubOpen}
+							<!-- The invisible `before:` margin bridges the gutter to the trigger row: when
+							     the submenu falls below its row, that gutter lies over the next row, and
+							     crossing it highlights that item, which closes the submenu. -->
 							<div
 								use:melt={$wacSubMenu}
 								use:hugViewportRight
-								class="pointer-events-auto z-[6001] flex flex-col gap-0.5 p-1 w-52 rounded-lg border border-gray-200 dark:border-gray-700 bg-surface shadow-xl focus:outline-none"
+								class="pointer-events-auto z-[6001] flex flex-col gap-0.5 p-1 w-52 rounded-lg border border-gray-200 dark:border-gray-700 bg-surface shadow-xl focus:outline-none before:absolute before:-inset-2 before:-z-10 before:content-['']"
 							>
 								{#each option.variants ?? [] as variant (variant.label)}
 									{@const VariantIcon = variant.icon}
@@ -593,7 +596,7 @@
 					<div
 						use:melt={$importSubMenu}
 						use:hugViewportRight
-						class="pointer-events-auto z-[6001] flex flex-col gap-0.5 p-1 w-52 rounded-lg border border-gray-200 dark:border-gray-700 bg-surface shadow-xl focus:outline-none"
+						class="pointer-events-auto z-[6001] flex flex-col gap-0.5 p-1 w-52 rounded-lg border border-gray-200 dark:border-gray-700 bg-surface shadow-xl focus:outline-none before:absolute before:-inset-2 before:-z-10 before:content-['']"
 					>
 						{#each importActions as action, i (action.label)}
 							<button