fix(sidebar): Fix sidebar pointer events for interaction (#7905)

## 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>
This commit is contained in:
kaalibro
2026-01-11 01:48:01 +05:00
committed by GitHub
parent 7bc6334065
commit 52b94e06a1

View File

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