apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-05 13:52:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix: separate nested interactive elements in roles manager

Browse source 
Moves the RolePermissionsDialog trigger to wrap only the text content
area instead of the entire card. The dropdown menu is now a sibling,
not nested inside the dialog button. Removes stopPropagation hacks.

Fixes #921
This commit is contained in:
Matt Van Horn 2026-03-24 03:11:30 -07:00
parent 15e9f113e5
commit ac2333ee1c
No known key found for this signature in database
1 changed files with 77 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

20
surfsense_web/components/settings/roles-manager.tsx
View file

@ -510,12 +510,10 @@ function RolesContent({
<div className="space-y-3"> <div className="space-y-3">
{roles.map((role) => ( {roles.map((role) => (
<div key={role.id}> <div key={role.id}>
<RolePermissionsDialog permissions={role.permissions} roleName={role.name}> <div className="w-full text-left relative flex items-center gap-4 rounded-lg border border-border/60 p-4 transition-colors hover:bg-muted/30">
<button
type="button"
className="w-full text-left relative flex items-center gap-4 rounded-lg border border-border/60 p-4 transition-colors hover:bg-muted/30 cursor-pointer"
>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<RolePermissionsDialog permissions={role.permissions} roleName={role.name}>
<button type="button" className="w-full text-left cursor-pointer">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="font-medium text-sm">{role.name}</span> <span className="font-medium text-sm">{role.name}</span>
{role.is_system_role && ( {role.is_system_role && (
@ -535,18 +533,15 @@ function RolesContent({
</p> </p>
)} )}
</div> </div>
</RolePermissionsDialog>
</div>
<div className="shrink-0"> <div className="shrink-0">
<PermissionsBadge permissions={role.permissions} /> <PermissionsBadge permissions={role.permissions} />
</div> </div>
{!role.is_system_role && ( {!role.is_system_role && (
<div <div className="shrink-0" role="none">
className="shrink-0"
role="none"
onClick={(e) => e.stopPropagation()}
onKeyDown={(e) => e.stopPropagation()}
>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8"> <Button variant="ghost" size="icon" className="h-8 w-8">
@ -595,8 +590,7 @@ function RolesContent({
</DropdownMenu> </DropdownMenu>
</div> </div>
)} )}
</button> </div>
</RolePermissionsDialog>
</div> </div>
))} ))}
</div> </div>