use a grid for the assignees

This commit is contained in:
Oliver Bryan
2026-01-17 00:57:37 +00:00
parent 07ac9ed635
commit 874f195838
2 changed files with 17 additions and 15 deletions

View File

@@ -36,7 +36,7 @@ export function IssuesTable({
{issuesData.map((issueData) => ( {issuesData.map((issueData) => (
<TableRow <TableRow
key={issueData.Issue.id} key={issueData.Issue.id}
className="cursor-pointer" className="cursor-pointer max-w-full"
onClick={() => { onClick={() => {
issueSelectAction?.(issueData); issueSelectAction?.(issueData);
}} }}
@@ -48,7 +48,7 @@ export function IssuesTable({
)} )}
{(columns.title == null || columns.title === true) && ( {(columns.title == null || columns.title === true) && (
<TableCell> <TableCell>
<span className="flex items-center gap-2 max-w-full truncate"> <span className="flex items-center gap-2 truncate">
{(columns.status == null || columns.status === true) && ( {(columns.status == null || columns.status === true) && (
<StatusTag <StatusTag
status={issueData.Issue.status} status={issueData.Issue.status}
@@ -73,11 +73,11 @@ export function IssuesTable({
username={assignee.username} username={assignee.username}
avatarURL={assignee.avatarURL} avatarURL={assignee.avatarURL}
textClass="text-xs" textClass="text-xs"
className="ring-2 ring-background" className="ring-1 ring-background"
/> />
))} ))}
{issueData.Assignees.length > 3 && ( {issueData.Assignees.length > 3 && (
<span className="flex items-center justify-center w-6 h-6 text-[10px] font-medium bg-muted text-muted-foreground rounded-full ring-2 ring-background"> <span className="flex items-center justify-center w-6 h-6 text-[10px] font-medium bg-muted text-muted-foreground rounded-full ring-1 ring-background">
+{issueData.Assignees.length - 3} +{issueData.Assignees.length - 3}
</span> </span>
)} )}

View File

@@ -49,27 +49,29 @@ export function MultiAssigneeSelect({
const canAddMore = selectedCount < users.length && lastRowHasSelection; const canAddMore = selectedCount < users.length && lastRowHasSelection;
return ( return (
<div className="flex flex-col gap-1"> <div className="grid grid-cols-2 gap-1">
{assigneeIds.map((assigneeId, index) => ( {assigneeIds.map((assigneeId, index) => (
<div key={`assignee-${index}-${assigneeId}`} className="flex items-center gap-1"> <>
<UserSelect <div key={`assignee-${index}-${assigneeId}`} className="flex items-center gap-1">
users={getAvailableUsers(index)} <UserSelect
value={assigneeId} users={getAvailableUsers(index)}
onChange={(value) => handleAssigneeChange(index, value)} value={assigneeId}
fallbackUser={getFallbackUser(assigneeId)} onChange={(value) => handleAssigneeChange(index, value)}
/> fallbackUser={getFallbackUser(assigneeId)}
/>
</div>
{index === assigneeIds.length - 1 && canAddMore && ( {index === assigneeIds.length - 1 && canAddMore && (
<Button <Button
variant="ghost" variant="dummy"
size="icon" size="icon"
className="h-7 w-7 shrink-0" className="h-7 w-7 shrink-0 h-9"
onClick={handleAddAssignee} onClick={handleAddAssignee}
title="Add assignee" title="Add assignee"
> >
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
</Button> </Button>
)} )}
</div> </>
))} ))}
</div> </div>
); );