feat(sidebar): enhance dropdown menu styling and organization display

- Updated the dropdown menu to have a maximum height and added overflow handling for better usability.
- Adjusted the layout of the organizations list to ensure proper display and scrolling behavior.
This commit is contained in:
Mauricio Siu
2026-02-13 00:19:08 -06:00
parent b63c22a7df
commit 81a04d0777

View File

@@ -630,15 +630,16 @@ function SidebarLogo() {
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="rounded-lg"
className="rounded-lg max-h-[min(70vh,28rem)] flex flex-col"
align="start"
side={isMobile ? "bottom" : "right"}
sideOffset={4}
>
<DropdownMenuLabel className="text-xs text-muted-foreground">
<DropdownMenuLabel className="text-xs text-muted-foreground shrink-0">
Organizations
</DropdownMenuLabel>
{organizations?.map((org) => {
<div className="overflow-y-auto overflow-x-hidden min-h-0 -mx-1 px-1">
{organizations?.map((org) => {
const isDefault = org.members?.[0]?.isDefault ?? false;
return (
<div
@@ -759,6 +760,7 @@ function SidebarLogo() {
</div>
);
})}
</div>
{(user?.role === "owner" ||
user?.role === "admin" ||
isCloud) && (