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 -->
{#if page.taskSidebarOpen && page.current !== "first-run" && !isSecondaryWindow}
<!-- Backdrop -->
<button
class="fixed inset-0 bg-black/20 z-40"
onclick={() => page.taskSidebarOpen = false}
aria-label="Close task sidebar"
></button>
<!-- Sidebar panel -->
<div class="fixed top-[36px] right-0 bottom-0 z-50 animate-slide-in-right">
<TaskSidebar />
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
class="fixed inset-0 z-40"
onclick={(e) => { if (e.target === e.currentTarget) page.taskSidebarOpen = false; }}
>
<!-- Backdrop tint (click this area to close) -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<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>
{/if}
{/if}