switch DeleteIcon to DeleteOutlinedIcon

frontend/src/components/AuthProviderFormDialog.tsx

@@ -10,7 +10,7 @@ import MenuItem from '@mui/material/MenuItem'
 import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
-import DeleteIcon from '@mui/icons-material/Delete'
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
 import { useEffect, useRef, useState } from 'react'
 import Autocomplete from './Autocomplete'
@@ -197,7 +197,7 @@ export default function AuthProviderFormDialog(props: AuthProviderFormDialogProp
 					)}
 				/>
 				<IconButton size="small" onClick={() => removeGroupMapping(index)}>
-					<DeleteIcon fontSize="small" />
+					<DeleteOutlinedIcon fontSize="small" />
 				</IconButton>
 			</Box>
 		)

frontend/src/components/BoardFieldValuesManagerDialog.tsx

@@ -1,4 +1,4 @@
-import DeleteIcon from '@mui/icons-material/Delete'
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator'
 import EditIcon from '@mui/icons-material/Edit'
 import {
@@ -185,7 +185,7 @@ function SortableRow({
 							onClick={() => onDelete(v.id)}
 							disabled={deletingId === v.id}
 						>
-							<DeleteIcon fontSize="small" />
+							<DeleteOutlinedIcon fontSize="small" />
 						</IconButton>
 					</Tooltip>
 				</Box>

frontend/src/components/CardChecklistItemRow.tsx

@@ -1,6 +1,6 @@
 import CheckIcon from '@mui/icons-material/Check'
 import CloseIcon from '@mui/icons-material/Close'
-import DeleteIcon from '@mui/icons-material/Delete'
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator'
 import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
@@ -96,7 +96,7 @@ export default function CardChecklistItemRow(props: CardChecklistItemRowProps) {
 			)}
 			{editing ? null : (
 				<IconButton size="small" onClick={() => onDelete(item.id)}>
-					<DeleteIcon fontSize="small" />
+					<DeleteOutlinedIcon fontSize="small" />
 				</IconButton>
 			)}
 		</Box>

frontend/src/components/CardDetailDialog.tsx

@@ -2,7 +2,7 @@ import AttachFileIcon from '@mui/icons-material/AttachFile'
 import CheckIcon from '@mui/icons-material/Check'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import CloseIcon from '@mui/icons-material/Close'
-import DeleteIcon from '@mui/icons-material/Delete'
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
 import DownloadIcon from '@mui/icons-material/Download'
 import ImageIcon from '@mui/icons-material/Image'
 import SendIcon from '@mui/icons-material/Send'
@@ -756,7 +756,7 @@ export default function CardDetailDialog(props: CardDetailDialogProps) {
 													<DownloadIcon fontSize="small" />
 												</IconButton>
 												<IconButton size="small" onClick={() => handleDeleteAttachment(item)}>
-													<DeleteIcon fontSize="small" />
+													<DeleteOutlinedIcon fontSize="small" />
 												</IconButton>
 											</Box>
 										)

frontend/src/components/ProjectsSection.tsx

@@ -1,5 +1,5 @@
 import AddIcon from '@mui/icons-material/Add'
-import DeleteIcon from '@mui/icons-material/Delete'
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
 import EditIcon from '@mui/icons-material/Edit'
 import ConfirmDeleteDialog from './ConfirmDeleteDialog'
 import { Box, Chip, IconButton, TextField, Tooltip, Typography } from '@mui/material'
@@ -62,7 +62,7 @@ function buildProjectColumns(
 					{isAdmin ? (
 						<Tooltip title="Delete">
 							<IconButton size="small" onClick={(e: React.MouseEvent) => { e.stopPropagation(); openDelete(p) }} aria-label="Delete">
-								<DeleteIcon fontSize="small" color="error" />
+								<DeleteOutlinedIcon fontSize="small" color="error" />
 							</IconButton>
 						</Tooltip>
 					) : null}

frontend/src/pages/AdminUserGroupsPage.tsx

@@ -1,5 +1,5 @@
 import AddIcon from '@mui/icons-material/Add'
-import DeleteIcon from '@mui/icons-material/Delete'
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
 import EditIcon from '@mui/icons-material/Edit'
 import CompactListItemText from '../components/CompactListItemText'
 import ConfirmDeleteDialog from '../components/ConfirmDeleteDialog'
@@ -13,10 +13,12 @@ import {
 	List,
 	ListItem,
 	TextField,
+	Tooltip,
 	Typography
 } from '@mui/material'
 import { useEffect, useMemo, useState } from 'react'
 import SectionCard from '../components/SectionCard'
+import SplitPanel from '../components/SplitPanel'
 import TintedPanel from '../components/TintedPanel'
 import PageAlert from '../components/PageAlert'
 import { api, SubjectPermission, User, UserGroup, UserGroupMember, UserGroupUpsertPayload } from '../api'
@@ -57,6 +59,7 @@ export default function AdminUserGroupsPage() {
 	const [selectedGroupID, setSelectedGroupID] = useState('')
 	const [groupQuery, setGroupQuery] = useState('')
 	const [newMemberUserID, setNewMemberUserID] = useState('')
+	const [addMemberOpen, setAddMemberOpen] = useState(false)
 	const [loading, setLoading] = useState(false)
 	const [busy, setBusy] = useState(false)
 	const [error, setError] = useState<string | null>(null)
@@ -146,8 +149,12 @@ export default function AdminUserGroupsPage() {
 
 	useEffect(() => {
 		if (selectedGroupID) {
+			setAddMemberOpen(false)
+			setNewMemberUserID('')
 			loadMembers(selectedGroupID).catch(() => {})
 		} else {
+			setAddMemberOpen(false)
+			setNewMemberUserID('')
 			setMembers([])
 		}
 	}, [selectedGroupID])
@@ -233,6 +240,7 @@ export default function AdminUserGroupsPage() {
 		try {
 			await api.addUserGroupMember(selectedGroupID, newMemberUserID)
 			setNewMemberUserID('')
+			setAddMemberOpen(false)
 			await loadMembers(selectedGroupID)
 		} catch (err) {
 			setError(err instanceof Error ? err.message : 'Failed to add member')
@@ -337,14 +345,17 @@ export default function AdminUserGroupsPage() {
 	const deleteMemberExpected = memberConfirmText(deleteMemberItem)
 
 	return (
-		<Box>
+		<Box sx={{ display: 'flex', flexDirection: 'column', height: 'calc(100dvh - 76px)', minHeight: 0 }}>
 			<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
 				<Typography variant="h5">Admin: User Groups</Typography>
 				<Button variant="outlined" startIcon={<AddIcon />} onClick={openCreate}>New Group</Button>
 			</Box>
 			<PageAlert message={error} onClose={() => setError(null)} sx={{ mb: 1 }} />
-			<Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '40% minmax(0, 1fr)' }, gap: 1, alignItems: 'start' }}>
+			<SplitPanel
-				<TintedPanel>
+				defaultRatio={0.38}
+				sx={{ flex: 1, minHeight: 0 }}
+				left={(
+					<TintedPanel sx={{ minWidth: 0, minHeight: 0, height: '100%', overflow: 'auto' }}>
 					<TextField
 						size="small"
 						label="Search"
@@ -352,7 +363,7 @@ export default function AdminUserGroupsPage() {
 						value={groupQuery}
 						onChange={(event) => setGroupQuery(event.target.value)}
 						fullWidth
-						sx={{ mb: 1, mt: '13px' /* having these mt mb here doesn't look nice */ }}
+						sx={{ mb: 1 }}
 					/>
 					{loading ? <Typography variant="body2" color="text.secondary">Loading groups...</Typography> : null}
 					{!loading && groups.length === 0 ? <Typography variant="body2" color="text.secondary">No groups.</Typography> : null}
@@ -381,36 +392,45 @@ export default function AdminUserGroupsPage() {
 										</Typography>
 									}
 								/>
-								{group.scope === 'all_users' ? <Chip size="small" label="All Users" sx={{ mt: 0.25, flexShrink: 0 }} /> : null}
+									{group.scope === 'all_users' ? <Chip size="small" label="All Users" sx={{ mt: 0.25, flexShrink: 0 }} /> : null}
-								<Box sx={{ display: 'flex', gap: 0.5, mt: 0.25, flexShrink: 0 }}>
+									<Box sx={{ display: 'flex', gap: 0.5, mt: 0.25, flexShrink: 0 }}>
-									<IconButton
+										<Tooltip title="Edit group">
-										size="small"
+											<IconButton
-										onClick={(event) => {
+												size="small"
-											event.stopPropagation()
+												aria-label={`Edit ${group.name}`}
-											openEdit(group)
+												onClick={(event) => {
-										}}
+													event.stopPropagation()
-									>
+													openEdit(group)
-											<EditIcon fontSize="small" />
+												}}
-									</IconButton>
+											>
-									<IconButton
+												<EditIcon fontSize="small" />
-										size="small"
+											</IconButton>
-										color="error"
+										</Tooltip>
-										onClick={(event) => {
+										<Tooltip title={group.scope === 'all_users' ? 'The All Users group cannot be deleted' : 'Delete group'}>
-											event.stopPropagation()
+											<span>
-											setDeleteItem(group)
+												<IconButton
-											setDeleteConfirm('')
+													size="small"
-										}}
+													color="error"
-										disabled={group.scope === 'all_users'}
+													aria-label={`Delete ${group.name}`}
-									>
+													onClick={(event) => {
-											<DeleteIcon fontSize="small" />
+														event.stopPropagation()
-									</IconButton>
+														setDeleteItem(group)
-								</Box>
+														setDeleteConfirm('')
+													}}
+													disabled={group.scope === 'all_users'}
+												>
+													<DeleteOutlinedIcon fontSize="small" />
+												</IconButton>
+											</span>
+										</Tooltip>
+									</Box>
 							</ListItem>
 						))}
 					</List>
-				</TintedPanel>
+					</TintedPanel>
-
+				)}
-				<Box sx={{ display: 'grid', gap: 1, minWidth: 0 }}>
+				right={(
+					<Box sx={{ display: 'grid', gap: 1, minWidth: 0, minHeight: 0, height: '100%', overflow: 'auto', alignContent: 'start' }}>
 					<SectionCard title="Selected Group">
 						{selectedGroup ? (
 							<Box sx={{ display: 'grid', gap: 0.75 }}>
@@ -457,7 +477,33 @@ export default function AdminUserGroupsPage() {
 						title="Members"
 						actions={
 							selectedGroup && selectedGroup.scope !== 'all_users' ? (
-									<Box sx={{ display: 'flex', gap: 1, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'flex-end' }}>
+								<Button
+									variant="outlined"
+									size="small"
+									startIcon={<AddIcon />}
+									onClick={() => setAddMemberOpen((open: boolean) => !open)}
+									disabled={busy}
+								>
+									Add Member
+								</Button>
+							) : undefined
+						}
+					>
+						{selectedGroup ? (
+							<>
+								{addMemberOpen && selectedGroup.scope !== 'all_users' ? (
+									<Box
+										sx={{
+											display: 'flex',
+											gap: 1,
+											alignItems: 'center',
+											flexWrap: 'wrap',
+											mb: 1,
+											p: 1,
+											borderRadius: 1,
+											bgcolor: 'action.hover',
+										}}
+									>
 										<Autocomplete<User, false, false, false>
 											size="small"
 											options={availableUsers}
@@ -466,39 +512,49 @@ export default function AdminUserGroupsPage() {
 											getOptionLabel={(user: User) => user.display_name ? `${user.display_name} (${user.username})` : user.username}
 											isOptionEqualToValue={(option: User, value: User) => option.id === value.id}
 											noOptionsText="No available users"
-											renderInput={(params) => <TextField {...params} label="User" />}
+											renderInput={(params) => <TextField {...params} label="User" placeholder="Select user" />}
-											sx={{ minWidth: 260 }}
+											sx={{ minWidth: 240, flex: 1 }}
 										/>
-										<Button variant="outlined" onClick={addMember} disabled={busy || !newMemberUserID}>
+										<Button variant="contained" size="small" onClick={addMember} disabled={busy || !newMemberUserID}>
-											Add Member
+											{busy ? 'Adding...' : 'Add'}
 										</Button>
-								</Box>
+										<Button
-							) : undefined
+											size="small"
-						}
+											onClick={() => {
-					>
+												setAddMemberOpen(false)
-						{selectedGroup ? (
+												setNewMemberUserID('')
-							<>
+											}}
+											disabled={busy}
+										>
+											Cancel
+										</Button>
+									</Box>
+								) : null}
 								<Box sx={{ display: 'grid', gap: 0.75 }}>
 									{members.map((member) => (
-										<Box
+											<Box
-											key={member.user_id}
+												key={member.user_id}
-											sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}
+												sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}
-										>
-											<Typography variant="body2">{userLabelByID(member.user_id)}</Typography>
-											<Button
-												size="small"
-												variant="outlined"
-												color="error"
-												onClick={() => {
-													setDialogError(null)
-													setDeleteMemberItem(member)
-													setDeleteMemberConfirm('')
-												}}
-												disabled={busy || selectedGroup.scope === 'all_users'}
 											>
-												Delete
+												<Typography variant="body2">{userLabelByID(member.user_id)}</Typography>
-											</Button>
+												<Tooltip title={selectedGroup.scope === 'all_users' ? 'The All Users group has no explicit members to delete' : 'Delete member'}>
-										</Box>
+													<span>
+														<IconButton
+															size="small"
+															color="error"
+															onClick={() => {
+																setDialogError(null)
+																setDeleteMemberItem(member)
+																setDeleteMemberConfirm('')
+															}}
+															disabled={busy || selectedGroup.scope === 'all_users'}
+															aria-label={`Delete ${userLabelByID(member.user_id)}`}
+														>
+															<DeleteOutlinedIcon fontSize="small" />
+														</IconButton>
+													</span>
+												</Tooltip>
+											</Box>
 									))}
 									{selectedGroup.scope === 'all_users' ? (
 										<Typography variant="body2" color="text.secondary">
@@ -547,8 +603,9 @@ export default function AdminUserGroupsPage() {
 							</Typography>
 						)}
 					</SectionCard>
-				</Box>
+					</Box>
-			</Box>
+				)}
+			/>
 
 			<UserGroupFormDialog
 				open={editOpen}

frontend/src/pages/ApiKeysPage.tsx

@@ -1,7 +1,7 @@
 import AddIcon from '@mui/icons-material/Add'
 import BlockIcon from '@mui/icons-material/Block'
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
-import DeleteIcon from '@mui/icons-material/Delete'
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
 import Alert from '@mui/material/Alert'
 import ConfirmDeleteDialog from '../components/ConfirmDeleteDialog'
 import APIKeyCreateFields from '../components/APIKeyCreateFields'
@@ -247,7 +247,7 @@ export default function ApiKeysPage() {
 										>
 											{key.disabled ? 'Enable' : 'Disable'}
 										</ListRowActionButton>
-										<ListRowActionButton startIcon={<DeleteIcon />} color="error" onClick={() => setDeleteTarget(key)}>
+										<ListRowActionButton startIcon={<DeleteOutlinedIcon />} color="error" onClick={() => setDeleteTarget(key)}>
 											Delete
 										</ListRowActionButton>
 									</ListRowActions>

frontend/src/pages/BoardPage.tsx

@@ -1,5 +1,5 @@
 import BarChartIcon from '@mui/icons-material/BarChart'
-import DeleteIcon from '@mui/icons-material/Delete'
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
 import EditIcon from '@mui/icons-material/Edit'
 import MoreVertIcon from '@mui/icons-material/MoreVert'
 import SettingsIcon from '@mui/icons-material/Settings'
@@ -380,7 +380,7 @@ export default function BoardPage() {
 										}}
 									>
 										<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-											<DeleteIcon fontSize="small" />
+											<DeleteOutlinedIcon fontSize="small" />
 											Delete board
 										</Box>
 									</MenuItem>

frontend/src/pages/ProjectBoardsPage.tsx

@@ -1,5 +1,5 @@
 import AddIcon from '@mui/icons-material/Add'
-import DeleteIcon from '@mui/icons-material/Delete'
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
 import EditIcon from '@mui/icons-material/Edit'
 import {
 	Box,
@@ -179,7 +179,7 @@ export default function ProjectBoardsPage() {
 						disabled={!canWrite}
 						onClick={() => { setDeleteBoard(board); setDeleteError(null); setDeleteConfirmValue('') }}
 					>
-						<DeleteIcon fontSize="small" />
+						<DeleteOutlinedIcon fontSize="small" />
 					</ListRowIconAction>
 				</ListRowActions>
 			),

frontend/src/pages/ProjectReposPage.tsx

@@ -1,6 +1,6 @@
 import AddIcon from '@mui/icons-material/Add'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
-import DeleteIcon from '@mui/icons-material/Delete'
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
 import EditIcon from '@mui/icons-material/Edit'
 import LinkOffIcon from '@mui/icons-material/LinkOff'
 import LinkIcon from '@mui/icons-material/Link'
@@ -536,7 +536,7 @@ export default function ProjectReposPage() {
 							<EditIcon fontSize="small" />
 						</ListRowIconAction>
 						<ListRowIconAction title={canWrite ? 'Delete repository' : 'You do not have permission to delete'} color="error" disabled={!canWrite} onClick={() => openDelete(repo)}>
-							<DeleteIcon fontSize="small" />
+							<DeleteOutlinedIcon fontSize="small" />
 						</ListRowIconAction>
 					</ListRowActions>
 				) : (
@@ -611,7 +611,7 @@ export default function ProjectReposPage() {
 						<HeaderActionButton
 							variant="outlined"
 							color="error"
-							startIcon={<DeleteIcon />}
+							startIcon={<DeleteOutlinedIcon />}
 							disabled={!canWrite || selectedRepoIds.length === 0}
 							onClick={openBulkDelete}
 						>

frontend/src/pages/ProjectSettingsPage.tsx

@@ -6,7 +6,7 @@ import ProjectOverviewCard from '../components/ProjectOverviewCard'
 import ProjectPageFrame from '../components/ProjectPageFrame'
 import HeaderActionButton from '../components/HeaderActionButton'
 import EditIcon from '@mui/icons-material/Edit'
-import DeleteIcon from '@mui/icons-material/Delete'
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
 import ConfirmDeleteDialog from '../components/ConfirmDeleteDialog'
 import ProjectFormDialog from '../components/ProjectFormDialog'
 import { ProjectDescriptionTab, ProjectHomePageValue } from '../components/ProjectFormDialog'
@@ -304,7 +304,7 @@ export default function ProjectSettingsPage() {
 							<HeaderActionButton variant="outlined" startIcon={<EditIcon />} onClick={openEdit} disabled={!project}>
 								Edit Project
 							</HeaderActionButton>
-							<HeaderActionButton variant="outlined" color="error" startIcon={<DeleteIcon />} onClick={openDelete} disabled={!project}>
+							<HeaderActionButton variant="outlined" color="error" startIcon={<DeleteOutlinedIcon />} onClick={openDelete} disabled={!project}>
 								Delete Project
 							</HeaderActionButton>
 						</Box>

frontend/src/pages/RepoGitBranchesPage.tsx

@@ -10,7 +10,7 @@ import ContextToolbar from '../components/ContextToolbar'
 import ProjectPageFrame from '../components/ProjectPageFrame'
 import RepoSubNav from '../components/RepoSubNav'
 import EditIcon from '@mui/icons-material/Edit'
-import DeleteIcon from '@mui/icons-material/Delete'
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
 import ConfirmDeleteDialog from '../components/ConfirmDeleteDialog'
 import FormDialogContent from '../components/FormDialogContent'
@@ -289,7 +289,7 @@ export default function RepoGitBranchesPage() {
 					</span>
 					<span title={repoEdit.canWrite ? 'Delete branch' : 'You do not have permission to delete'}>
 						<IconButton size="small" onClick={() => openDelete(branch.name)} disabled={!repoEdit.canWrite} aria-label="Delete branch">
-							<DeleteIcon fontSize="small" />
+							<DeleteOutlinedIcon fontSize="small" />
 						</IconButton>
 					</span>
 				</Box>