From e4cb968659946331932039de96c701a8c1275c80 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 13 Mar 2026 15:53:01 -0400
Subject: [PATCH] fix(launcher): implement reliable click-outside-to-close for
 cfg drawer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Flowbite's built-in outsideclose was unreliable for this side-drawer setup.
Root cause: Flowbite's _onclick handler uses dlg.getBoundingClientRect() to
detect backdrop clicks. This works in theory for showModal() dialogs, but
something in the Svelte transition / stacking context prevented it firing.

Fix: bypass Flowbite's detection entirely.
- onclick prop on <Drawer> is spread through Flowbite's restProps chain
  to the native <dialog> element, overriding the broken _onclick handler.
  Handler: just closes the drawer unconditionally.
- A stopPropagation wrapper div around all visual panel content ensures
  that clicks INSIDE the panel never bubble up to the dialog element.
  Only genuine backdrop clicks (outside the visual panel area) reach
  the dialog and trigger the close handler.

ESC key is unaffected — it fires oncancel not onclick.
---
 .../events/[event_id]/(launcher)/launcher/+layout.svelte | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte b/src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte
index a39fe272..33a126da 100644
--- a/src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte
+++ b/src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte
@@ -875,6 +875,7 @@
 
 <Drawer
     dismissable={false}
+    onclick={() => ($events_loc.launcher.hide_drawer__cfg = true)}
     class="bg-orange-50 dark:bg-slate-800 opacity-90 hover:opacity-97 transition-all duration-300 border border-gray-300 dark:border-gray-600 w-full md:w-96 lg:w-[32rem]"
     placement="left"
     {...{
@@ -888,6 +889,13 @@
     bind:hidden={$events_loc.launcher.hide_drawer__cfg}
     id="sidebar1"
 >
+    <!-- Stop-propagation wrapper: prevents clicks inside the visual panel from
+         bubbling up to the <dialog> element. The onclick on the <Drawer> above
+         is spread through to the native <dialog> by Flowbite, overriding its
+         broken outsideclose detection. With this wrapper, ONLY genuine backdrop
+         clicks (outside the visible panel) reach the dialog and close the drawer. -->
+    <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+    <div role="presentation" onclick={(e) => e.stopPropagation()}>
     <Launcher_cfg></Launcher_cfg>
 
     <hr class="my-2 border-gray-300 dark:border-gray-600" />
@@ -921,6 +929,7 @@
             </a>
         {/if}
     </div>
+    </div>
 </Drawer>
 
 <Drawer