fix(ui): constrain organization menu width when sidebar is collapsed - #4845
fix(ui): constrain organization menu width when sidebar is collapsed#4845hbilal9 wants to merge 1 commit into
Conversation
The organization DropdownMenuContent has no width constraint, so when the sidebar is collapsed the popover sizes against the narrow icon-rail trigger. The org name span (min-w-0 flex-1 truncate) collapses to nothing, cramming the row actions together and wrapping the Add organization item. Apply the same width pattern used by the user-nav dropdown: w-(--radix-dropdown-menu-trigger-width) with a minimum width. Use min-w-64 to match SIDEBAR_WIDTH (16rem) so the menu renders at the same width in both sidebar states. Closes Dokploy#4840
|
Note for review: the earlier sidebar overflow fix (#4755) is already included in v0.29.12 — |
port: fix(ui): constrain organization menu width when sidebar is collapsed (upstream Dokploy#4845)
|
Hi @Siumauricio, gentle bump when you get a chance. This closes #4840 (org dropdown rendering broken when the sidebar is collapsed) — reproducible on v0.29.12, and it is a separate cause from the earlier overflow fix in #4755. It is a one-line width constraint on the dropdown, matching the pattern already used in user-nav.tsx. The CI checks are pending a first-time workflow-run approval on my side. Glad to adjust anything. Thanks for the great project! |
Summary
Closes #4840
When the sidebar is collapsed, the Organizations dropdown renders as a cramped, partially-broken popover: the org name column collapses to nothing, the row action buttons (star/edit/delete) get crammed together, and the Add organization item wraps onto two lines.
Cause
The organization
DropdownMenuContentinapps/dokploy/components/layouts/side.tsxhas no width constraint. The popover therefore sizes against its trigger, and with the sidebar collapsed the trigger is only the narrow icon rail. Inside the menu, each org name span usesmin-w-0 flex-1 truncate— classes that assume a constrained container — so with no width floor the flex layout squeezes the name to zero and the content implodes.With the sidebar expanded the trigger is ~16rem wide, which is why the layout only accidentally looked correct in that state.
Fix
Apply the same width pattern already used by the user-nav dropdown (
user-nav.tsx):min-w-64(16rem) matchesSIDEBAR_WIDTH, so the menu renders at the same width whether the sidebar is collapsed or expanded. A slightly larger floor than user-nav'smin-w-56because org rows carry a logo, name, and three action buttons.Verification
biome checkclean on the file.user-nav.tsxdropdown and the stock shadcn sidebar team-switcher.