matthias/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(permissions): flatten permission matrix table to fix column alignment and scroll lag

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-04-18 16:20:44 +02:00
parent fa9f50d982
commit bef5a685a8
1 changed files with 51 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/admin/PermissionMatrixTab.tsx
View File

@@ -460,12 +460,7 @@ function PermissionMatrixTab() {
})}
</TableRow>
<TableRow>
<TableCell colSpan={2 + nonAdminGroups.length} sx={{ p: 0 }}>
<Collapse in={isExpanded} timeout="auto" unmountOnExit>
<Table size="small">
<TableBody>
{(() => {
{isExpanded && (() => {
let lastSubGroup: string | null | undefined = undefined;
return fgPerms.map((perm: Permission) => {
const depTooltip = getDepTooltip(perm.id);
@@ -479,7 +474,7 @@ function PermissionMatrixTab() {
<TableRow>
<TableCell
colSpan={2 + nonAdminGroups.length}
sx={{ pl: 5, py: 0.5, bgcolor: 'action.selected', position: 'sticky', left: 0, zIndex: 1 }}
sx={{ pl: 5, py: 0.5, bgcolor: 'action.selected' }}
>
<Typography variant="caption" sx={{ fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, color: 'text.secondary' }}>
{subGroup}
@@ -488,10 +483,10 @@ function PermissionMatrixTab() {
</TableRow>
)}
<TableRow hover>
<TableCell sx={{ pl: 6, minWidth: 250, position: 'sticky', left: 0, zIndex: 1, bgcolor: 'background.paper' }}>
<TableCell sx={{ pl: 6, bgcolor: 'background.paper' }}>
<Tooltip title={tooltipText || ''} placement="right"><span>{perm.label}</span></Tooltip>
</TableCell>
<TableCell align="center" sx={{ minWidth: 120 }}>
<TableCell align="center">
<Checkbox checked disabled sx={{ opacity: 0.3 }} />
</TableCell>
{nonAdminGroups.map(g => {
@@ -499,7 +494,7 @@ function PermissionMatrixTab() {
const curReverseDeps = reverseDeps[perm.id] || [];
const isRequiredByOther = isGranted && curReverseDeps.some(d => (grants[g] || []).includes(d));
return (
<TableCell key={g} align="center" sx={{ minWidth: 120 }}>
<TableCell key={g} align="center">
<Tooltip title={isRequiredByOther ? 'Wird von anderen Berechtigungen benötigt' : ''} placement="top">
<span>
<Checkbox checked={isGranted}
@@ -516,11 +511,6 @@ function PermissionMatrixTab() {
);
});
})()}
</TableBody>
</Table>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
})}