From cd98e5ba2088f79b14a0cc2e188a7cc756edb613 Mon Sep 17 00:00:00 2001 From: fullstackjam Date: Sun, 28 Jun 2026 23:50:35 +0800 Subject: [PATCH 1/3] fix(ui): portal context menu so dropdown isn't clipped by sibling cards The dropdown was position:absolute inside each card, but cards create their own stacking context via transform (hover lift + fadeUp animation), trapping the menu's z-index below the next sibling card. Render the dropdown as a body portal positioned fixed relative to the trigger so it escapes the per-card stacking context. Fixes ConfigRow and ConfigCard. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/lib/components/ContextMenu.svelte | 43 +++++++++++++++++++-------- 1 file changed, 31 insertions(+), 12 deletions(-) diff --git a/src/lib/components/ContextMenu.svelte b/src/lib/components/ContextMenu.svelte index 36dc812..06c71d7 100644 --- a/src/lib/components/ContextMenu.svelte +++ b/src/lib/components/ContextMenu.svelte @@ -12,12 +12,23 @@ } = $props(); let open = $state(false); - let menuEl: HTMLDivElement | undefined = $state(undefined); + let triggerEl: HTMLButtonElement | undefined = $state(undefined); + let dropdownEl: HTMLDivElement | undefined = $state(undefined); + let pos = $state({ top: 0, right: 0 }); + + // Position the dropdown relative to the trigger. It's rendered as a body + // portal (see `portal` below) so it escapes the per-card stacking context. + function reposition() { + if (!open || !triggerEl) return; + const r = triggerEl.getBoundingClientRect(); + pos = { top: r.bottom + 4, right: window.innerWidth - r.right }; + } function toggle(e: MouseEvent) { e.stopPropagation(); e.preventDefault(); open = !open; + if (open) reposition(); } function select(action: string, e: MouseEvent) { @@ -28,18 +39,28 @@ } function handleClickOutside(e: MouseEvent) { - if (open && menuEl && !menuEl.contains(e.target as Node)) { - open = false; - } + if (!open) return; + const target = e.target as Node; + if (triggerEl?.contains(target) || dropdownEl?.contains(target)) return; + open = false; + } + + function portal(node: HTMLElement) { + document.body.appendChild(node); + return { + destroy() { + node.remove(); + } + }; } - + -
- +
+ {#if open} -
+
{#each items as item, i} {#if i > 0 && item.danger && !items[i - 1]?.danger}
@@ -94,16 +115,14 @@ } .dropdown { - position: absolute; - top: calc(100% + 4px); - right: 0; + position: fixed; min-width: 170px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03); - z-index: 100; + z-index: 1000; animation: menuIn 0.15s ease-out; } From 7b54e41e400db1a90c4e8f6b73bd0cab564f4ff2 Mon Sep 17 00:00:00 2001 From: fullstackjam Date: Mon, 29 Jun 2026 00:06:55 +0800 Subject: [PATCH 2/3] refactor(ui): drop now-dead .ctx position:relative from context menu The dropdown is portaled to document.body and positioned fixed, so .ctx no longer anchors anything. Removing the obsolete rule the portal change left behind. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/lib/components/ContextMenu.svelte | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/lib/components/ContextMenu.svelte b/src/lib/components/ContextMenu.svelte index 06c71d7..d3ddb25 100644 --- a/src/lib/components/ContextMenu.svelte +++ b/src/lib/components/ContextMenu.svelte @@ -78,10 +78,6 @@