From 52b94e06a1d8d7de17f080efc57cec8bdb889549 Mon Sep 17 00:00:00 2001
From: kaalibro <44464226+kaalibro@users.noreply.github.com>
Date: Sun, 11 Jan 2026 01:48:01 +0500
Subject: [PATCH] fix(sidebar): Fix sidebar pointer events for interaction
 (#7905)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

A small fix for #6700

Fixes pointer events handling in sidebar by moving `pointer-events-auto`
from the main container to specific states (Connected and Floating),
preventing unintended event blocking.

## Changes

- **What**: Relocated `pointer-events-auto` class from the main sidebar
container (`.side-tool-bar-container`) to conditional states:
- Applied to `connected-sidebar` class when sidebar is connected (line
7)
- Applied to floating `sidebar-item-group` elements when sidebar is
floating (line 151)

## Screenshots

### Before:


https://github.com/user-attachments/assets/f93badad-e248-49f0-9cde-99e364f4773d


### After:


https://github.com/user-attachments/assets/16f8511c-cbc0-4e2d-bac1-33f932e979aa

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7905-fix-sidebar-Fix-sidebar-pointer-events-for-interaction-2e26d73d365081218361e79010c3347c)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
---
 src/components/sidebar/SideToolbar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 41bca82f0..1eabf9cd8 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -1,10 +1,10 @@
 <template>
   <nav
     ref="sideToolbarRef"
-    class="side-tool-bar-container flex h-full flex-col items-center bg-transparent [.floating-sidebar]:-mr-2 pointer-events-auto"
+    class="side-tool-bar-container flex h-full flex-col items-center bg-transparent [.floating-sidebar]:-mr-2"
     :class="{
       'small-sidebar': isSmall,
-      'connected-sidebar': isConnected,
+      'connected-sidebar pointer-events-auto': isConnected,
       'floating-sidebar': !isConnected,
       'overflowing-sidebar': isOverflowing,
       'border-r border-[var(--interface-stroke)] shadow-interface': isConnected
@@ -145,8 +145,8 @@ 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' +
-      (isConnected.value ? '' : ' rounded-lg shadow-interface')
+    'sidebar-item-group flex flex-col items-center overflow-hidden flex-shrink-0',
+    !isConnected.value && 'rounded-lg shadow-interface pointer-events-auto'
   )
 )