Fix mouse clicks being swallowed by new menu (#6103)

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

@@ -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>
 

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>
 

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 }">

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')
   )
 )