From 872291b0a083ff2e1e245ebb5bee21debc86c6cb Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 26 May 2026 22:04:34 -0400
Subject: [PATCH] fix(launcher): replace Flowbite Modal with custom overlay for
 cfg panel

Two problems with the Flowbite <Modal> approach:
1. Built-in dismissable CloseButton rendered with no functional dismiss path
   (no title/form), appearing centered in the panel.
2. size="xl" (max-w-7xl) left no backdrop area on typical laptop screens,
   making outsideclose impossible to trigger.

Replace with a simple custom overlay: full-screen backdrop div that closes
on click, inner panel with stopPropagation. Matches the original Drawer
pattern. close_cfg() writes to store immediately on backdrop click for
reliable persistence independent of effect timing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../(launcher)/launcher/+layout.svelte        | 88 ++++++++++++-------
 1 file changed, 55 insertions(+), 33 deletions(-)

diff --git a/src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte b/src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte
index d9a09fa7..65b94948 100644
--- a/src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte
+++ b/src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte
@@ -17,6 +17,7 @@ import { sineIn } from 'svelte/easing';
 // *** Import other supporting libraries
 import { liveQuery } from 'dexie';
 import { Drawer, Modal } from 'flowbite-svelte';
+import { fade } from 'svelte/transition';
 import { listen, idle, onIdle, restartCountdown } from 'svelte-idle';
 
 import {
@@ -122,6 +123,15 @@ $effect(() => {
     });
 });
 
+// Called by backdrop click. Writes to store immediately (don't rely on effect timing).
+function close_cfg() {
+    modal_cfg_open = false;
+    events_loc.update((loc) => {
+        if (loc.launcher) loc.launcher.hide_drawer__cfg = true;
+        return loc;
+    });
+}
+
 // Generate a stable per-device client ID on first load and persist it.
 // events_loc is backed by svelte-persisted-store (localStorage) so this
 // survives page reloads. Without this, client_id falls back to Date.now()
@@ -928,41 +938,53 @@ $effect(() => {
     </button>
 </div>
 
-<Modal
-    bind:open={modal_cfg_open}
-    autoclose={false}
-    outsideclose
-    size="xl"
-    class="relative flex flex-col items-center justify-center p-0 overflow-hidden"
-    id="modal_cfg">
-    <Launcher_cfg></Launcher_cfg>
-
+{#if modal_cfg_open}
+    <!-- Backdrop: full-screen overlay. Clicking anywhere on it closes the cfg panel. -->
+    <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
     <div
-        class="bg-surface-100-900 flex max-w-full flex-row flex-wrap items-center justify-center gap-2 border-t border-surface-500/10 p-4">
-        <a
-            href="/events/{$events_slct.event_id}"
-            class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500">
-            <Search size="1em" class="m-1" />
-            Session Search
-        </a>
-        {#if $events_slct?.event_location_id}
-            <a
-                href="/events/{$events_slct.event_id}/location/{$events_slct.event_location_id}"
-                class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500">
-                <MapPin size="1em" class="m-1" />
-                View Selected Location
-            </a>
-        {/if}
-        {#if $events_slct?.event_session_id}
-            <a
-                href="/events/{$events_slct.event_id}/session/{$events_slct.event_session_id}"
-                class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500">
-                <GraduationCap size="1em" class="m-1" />
-                View Selected Session
-            </a>
-        {/if}
+        role="presentation"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/60 p-4"
+        onclick={close_cfg}
+        transition:fade={{ duration: 200 }}>
+        <!-- Panel: stop-propagation so clicks inside don't reach the backdrop handler. -->
+        <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+        <div
+            role="dialog"
+            aria-modal="true"
+            aria-label="Launcher Settings"
+            tabindex="-1"
+            class="flex max-h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-lg shadow-2xl"
+            onclick={(e) => e.stopPropagation()}>
+            <Launcher_cfg></Launcher_cfg>
+
+            <div
+                class="bg-surface-100-900 flex flex-row flex-wrap items-center justify-center gap-2 border-t border-surface-500/10 p-4">
+                <a
+                    href="/events/{$events_slct.event_id}"
+                    class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500">
+                    <Search size="1em" class="m-1" />
+                    Session Search
+                </a>
+                {#if $events_slct?.event_location_id}
+                    <a
+                        href="/events/{$events_slct.event_id}/location/{$events_slct.event_location_id}"
+                        class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500">
+                        <MapPin size="1em" class="m-1" />
+                        View Selected Location
+                    </a>
+                {/if}
+                {#if $events_slct?.event_session_id}
+                    <a
+                        href="/events/{$events_slct.event_id}/session/{$events_slct.event_session_id}"
+                        class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500">
+                        <GraduationCap size="1em" class="m-1" />
+                        View Selected Session
+                    </a>
+                {/if}
+            </div>
+        </div>
     </div>
-</Modal>
+{/if}
 
 <Drawer
     activateClickOutside={false}