From 38f188759dac8d3d8923156dd238c26594421f20 Mon Sep 17 00:00:00 2001
From: AustinMroz <austin@comfy.org>
Date: Thu, 16 Oct 2025 22:26:54 -0700
Subject: [PATCH] Fix mouse clicks being swallowed by new menu (#6103)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Moves around pointer events styling so that mouse events near the top
and side bar don't get swallowed.

Resolves #6102

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6103-Fix-mouse-clicks-being-swallowed-by-new-menu-28f6d73d3650819aa4a1dc1eacfd3adb)
by [Unito](https://www.unito.io)
---
 src/components/LiteGraphCanvasSplitterOverlay.vue | 2 +-
 src/components/TopMenuSection.vue                 | 7 ++-----
 src/components/breadcrumb/SubgraphBreadcrumb.vue  | 1 +
 src/components/sidebar/SideToolbar.vue            | 2 +-
 4 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/LiteGraphCanvasSplitterOverlay.vue b/src/components/LiteGraphCanvasSplitterOverlay.vue
index 6b4089fe7..1c467ef05 100644
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/src/components/LiteGraphCanvasSplitterOverlay.vue
@@ -9,7 +9,7 @@
         'flex-row-reverse': sidebarLocation === 'right'
       }"
     >
-      <div class="side-toolbar-container pointer-events-auto">
+      <div class="side-toolbar-container">
         <slot name="side-toolbar" />
       </div>
 
diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue
index 5736b1fd2..e4707094a 100644
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -1,9 +1,6 @@
 <template>
-  <div
-    v-if="!workspaceStore.focusMode"
-    class="pointer-events-none ml-2 flex pt-2"
-  >
-    <div class="pointer-events-auto min-w-0 flex-1">
+  <div v-if="!workspaceStore.focusMode" class="ml-2 flex pt-2">
+    <div class="min-w-0 flex-1">
       <SubgraphBreadcrumb />
     </div>
 
diff --git a/src/components/breadcrumb/SubgraphBreadcrumb.vue b/src/components/breadcrumb/SubgraphBreadcrumb.vue
index c0e23d41b..4d6c82671 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -17,6 +17,7 @@
       ref="breadcrumbRef"
       class="w-fit rounded-lg p-0"
       :model="items"
+      :pt="{ item: { class: 'pointer-events-auto' } }"
       aria-label="Graph navigation"
     >
       <template #item="{ item }">
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 43ab684ef..07410f344 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -113,7 +113,7 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
 const isOverflowing = ref(false)
 const groupClasses = computed(() =>
   cn(
-    'sidebar-item-group flex flex-col items-center overflow-hidden flex-shrink-0' +
+    'sidebar-item-group pointer-events-auto flex flex-col items-center overflow-hidden flex-shrink-0' +
       (isConnected.value ? '' : ' rounded-lg shadow-md')
   )
 )