Sidebar: GroupLabel overlaps previous group's MenuItem when collapsible=icon

Describe the bug

When collapsible is set to icon, in the collapsed state, the GroupLabel within a Group (containing GroupLabel + GroupContent) overlaps and covers the last MenuItem inside the GroupContent.

When collapsed, the GroupLabel only applies opacity-0 and -mt-8. Directly setting hidden would cause the collapse animation to disappear. Instead, group-data-[collapsible=icon]:pointer-events-none should be added.

Reproduction

<Sidebar.Provider> <Sidebar.Root collapsible="icon"> <Sidebar.Content> {#each itemGroup as group (group.label)} <Sidebar.Group> <Sidebar.GroupLabel>{group.label}</Sidebar.GroupLabel> <Sidebar.GroupContent> <Sidebar.Menu> {#each group.items as item (item.url)} <Sidebar.MenuItem> <Sidebar.MenuButton tooltipContent={item.label}> {#snippet child({ props })} <a href={item.url} {...props}> <item.icon /> {item.label} {/snippet} </Sidebar.MenuButton> </Sidebar.MenuItem> {/each} </Sidebar.Menu> </Sidebar.GroupContent> </Sidebar.Group> {/each} </Sidebar.Content> <Sidebar.Footer> <Sidebar.Menu> <Sidebar.MenuItem> <Sidebar.MenuButton tooltipContent="setting"> setting </Sidebar.MenuButton> </Sidebar.MenuItem> </Sidebar.Menu> </Sidebar.Footer> </Sidebar.Root> </Sidebar.Provider>

Logs

System Info

system ubuntu26.04 browser edge150.0.4078.99

Severity

annoyance