ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(sidebar): selecting from recents ... menu no longer collapses the section

Browse source 
DropdownMenu was nested inside CollapsibleTrigger so Radix closing
the dropdown fired a click that bubbled up and toggled the collapsible.
Fix: make CollapsibleTrigger and DropdownMenu siblings inside a flex
wrapper instead of parent/child.
This commit is contained in:
LeoBorcherding 2026-06-07 00:53:06 -05:00
commit f719a82755
1 changed files with 6 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

11
studio/frontend/src/components/app-sidebar.tsx
View file

@ -957,16 +957,17 @@ export function AppSidebar() {
<Collapsible open={chatOpen} onOpenChange={setChatOpen} asChild>
<SidebarGroup className="group-data-[collapsible=icon]:hidden px-0 py-0">
<SidebarGroupLabel className={cn("sidebar-sticky-label sidebar-sticky-label-following", scrolled && "is-scrolled")} asChild>
<CollapsibleTrigger className="cursor-pointer flex w-full items-center gap-1 group/sb-collap">
{t("shell.navigation.recents")}
<ChevronDown className="size-3.5 opacity-0 transition-[transform,opacity] duration-200 group-hover/sb-collap:opacity-100 group-focus-visible/sb-collap:opacity-100 data-[state=open]:rotate-0 [[data-state=closed]_&]:rotate-[-90deg] [[data-state=closed]_&]:opacity-100" />
<div className="flex w-full items-center group/sb-collap">
<CollapsibleTrigger className="cursor-pointer flex flex-1 items-center gap-1 min-w-0">
{t("shell.navigation.recents")}
<ChevronDown className="size-3.5 opacity-0 transition-[transform,opacity] duration-200 group-hover/sb-collap:opacity-100 group-focus-visible/sb-collap:opacity-100 data-[state=open]:rotate-0 [[data-state=closed]_&]:rotate-[-90deg] [[data-state=closed]_&]:opacity-100" />
</CollapsibleTrigger>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
type="button"
className="ml-auto flex items-center justify-center rounded-sm p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground focus:outline-none focus-visible:ring-0"
title="Export recents"
onClick={(e) => e.stopPropagation()}
>
<MoreHorizontalIcon className="size-3.5" />
</button>
@ -1017,7 +1018,7 @@ export function AppSidebar() {
</DropdownMenuSub>
</DropdownMenuContent>
</DropdownMenu>
</CollapsibleTrigger>
</div>
</SidebarGroupLabel>
<CollapsibleContent>
<SidebarGroupContent className="px-2">