fix(kon): task sidebar overlay click handling

- Backdrop tint div has direct onclick to close sidebar
- Sidebar panel uses stopPropagation so clicks inside don't close
- Outer container uses target check for self-click dismiss
- Svelte 5 compatible (no |self modifier)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
jake
2026-03-16 23:33:54 +00:00
parent fe3739fdbb
commit c5b2767ad8

View File

@@ -125,15 +125,25 @@
<!-- Task sidebar as overlay — doesn't shrink main content --> <!-- Task sidebar as overlay — doesn't shrink main content -->
{#if page.taskSidebarOpen && page.current !== "first-run" && !isSecondaryWindow} {#if page.taskSidebarOpen && page.current !== "first-run" && !isSecondaryWindow}
<!-- Backdrop --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<button <!-- svelte-ignore a11y_no_static_element_interactions -->
class="fixed inset-0 bg-black/20 z-40" <div
onclick={() => page.taskSidebarOpen = false} class="fixed inset-0 z-40"
aria-label="Close task sidebar" onclick={(e) => { if (e.target === e.currentTarget) page.taskSidebarOpen = false; }}
></button> >
<!-- Sidebar panel --> <!-- Backdrop tint (click this area to close) -->
<div class="fixed top-[36px] right-0 bottom-0 z-50 animate-slide-in-right"> <!-- svelte-ignore a11y_no_static_element_interactions -->
<TaskSidebar /> <div
class="absolute inset-0 bg-black/10"
onclick={() => { page.taskSidebarOpen = false; }}
></div>
<!-- Sidebar panel (clicks here stay in the sidebar) -->
<div
class="absolute top-[36px] right-0 bottom-0 w-[280px] z-50 shadow-xl"
onclick={(e) => e.stopPropagation()}
>
<TaskSidebar />
</div>
</div> </div>
{/if} {/if}
{/if} {/if}