From c5b2767ad872186a8ef69074019ee148df7958c2 Mon Sep 17 00:00:00 2001
From: jake <jakeadriansames@gmail.com>
Date: Mon, 16 Mar 2026 23:33:54 +0000
Subject: [PATCH] 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>
---
 src/routes/+layout.svelte | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 68a50cd..762cf84 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -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}