@alliance-droid/status-feedback-system 1.3.6 → 1.3.7

package/dist/components/DevFeedback.svelte

@@ -70,13 +70,46 @@
 
 	let formOpen = $state(false);
 	let formPopoverEl: HTMLDivElement | undefined = $state();
+	let formOriginalParent: HTMLElement | null = null;
+	let formPortalTarget: HTMLElement | null = null;
+
+	/**
+	 * Find the topmost open modal dialog.
+	 * showModal() makes everything outside the dialog inert — including
+	 * top-layer popovers that aren't descendants of the dialog.
+	 */
+	function findOpenModalDialog(): HTMLDialogElement | null {
+		const dialogs = document.querySelectorAll<HTMLDialogElement>('dialog[open]');
+		for (const d of dialogs) {
+			if (d.open) return d;
+		}
+		return null;
+	}
 
 	// Promote form modal to the browser's top layer when opened
+	// Portal into any open modal dialog to escape inertness
 	$effect(() => {
-		if (formOpen && formPopoverEl && typeof formPopoverEl.showPopover === 'function') {
-			try { formPopoverEl.showPopover(); } catch { /* fallback to z-index */ }
-		} else if (!formOpen && formPopoverEl && typeof formPopoverEl.hidePopover === 'function') {
-			try { formPopoverEl.hidePopover(); } catch { /* already hidden */ }
+		if (formOpen && formPopoverEl) {
+			// Portal into modal dialog if one is open
+			const modalDialog = findOpenModalDialog();
+			if (modalDialog && formPopoverEl.parentElement !== modalDialog) {
+				formOriginalParent = formPopoverEl.parentElement;
+				formPortalTarget = modalDialog;
+				modalDialog.appendChild(formPopoverEl);
+			}
+
+			if (typeof formPopoverEl.showPopover === 'function') {
+				try { formPopoverEl.showPopover(); } catch { /* fallback to z-index */ }
+			}
+		} else if (!formOpen && formPopoverEl) {
+			if (typeof formPopoverEl.hidePopover === 'function') {
+				try { formPopoverEl.hidePopover(); } catch { /* already hidden */ }
+			}
+			// Move back to original parent
+			if (formPortalTarget && formOriginalParent) {
+				try { formOriginalParent.appendChild(formPopoverEl); } catch { /* already moved */ }
+				formPortalTarget = null;
+			}
 		}
 	});
 	let formType = $state<'bug' | 'feature'>('bug');

package/dist/components/dev/DevContextMenu.svelte

@@ -8,18 +8,53 @@
 		onViewBoard?: () => void;
 	}
 
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 
 	let { x, y, boardUrl, onReportBug, onRequestFeature, onViewBoard }: Props = $props();
 
 	let popoverEl: HTMLDivElement | undefined = $state();
+	let originalParent: HTMLElement | null = null;
+	let portalTarget: HTMLElement | null = null;
 
 	let adjustedX = $derived(Math.min(x, (typeof window !== 'undefined' ? window.innerWidth : 800) - 200));
 	let adjustedY = $derived(Math.min(y, (typeof window !== 'undefined' ? window.innerHeight : 600) - 160));
 
-	// Show the popover on mount to promote it to the top layer
+	/**
+	 * Find the topmost open modal dialog.
+	 * showModal() makes everything outside the dialog inert — including
+	 * top-layer popovers that aren't descendants of the dialog.
+	 * By portalling into the dialog, our menu becomes a descendant and
+	 * escapes the inertness.
+	 */
+	function findOpenModalDialog(): HTMLDialogElement | null {
+		const dialogs = document.querySelectorAll<HTMLDialogElement>('dialog[open]');
+		// showModal() sets the `modal` property — filter for true modals
+		for (const d of dialogs) {
+			// A dialog opened with showModal() will have a non-null ::backdrop
+			// and will be in the top layer. We can detect this via the "open"
+			// attribute + checking if it has modal behavior (no direct API,
+			// but modal dialogs block interaction with the rest of the page).
+			// The simplest reliable check: modal dialogs have returnValue capability
+			// and are in the top layer. In practice, all open dialogs we care about
+			// are modal since our Modal component always uses showModal().
+			if (d.open) return d;
+		}
+		return null;
+	}
+
 	onMount(() => {
-		if (popoverEl && typeof popoverEl.showPopover === 'function') {
+		if (!popoverEl) return;
+
+		// If a modal dialog is open, portal into it to escape inertness
+		const modalDialog = findOpenModalDialog();
+		if (modalDialog) {
+			originalParent = popoverEl.parentElement;
+			portalTarget = modalDialog;
+			modalDialog.appendChild(popoverEl);
+		}
+
+		// Show the popover to promote it to the top layer
+		if (typeof popoverEl.showPopover === 'function') {
 			try {
 				popoverEl.showPopover();
 			} catch {
@@ -28,6 +63,20 @@
 		}
 	});
 
+	onDestroy(() => {
+		// Move the element back before Svelte tries to clean up
+		if (popoverEl && portalTarget && originalParent) {
+			try {
+				if (typeof popoverEl.hidePopover === 'function') {
+					popoverEl.hidePopover();
+				}
+				originalParent.appendChild(popoverEl);
+			} catch {
+				// Element may already be removed
+			}
+		}
+	});
+
 	function handleKeydown(e: KeyboardEvent) {
 		const menu = (e.currentTarget as HTMLElement);
 		const items = menu.querySelectorAll<HTMLElement>('[role="menuitem"]');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alliance-droid/status-feedback-system",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "type": "module",
   "description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
   "svelte": "./dist/index.js",