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) => (
<TableRow
key={issueData.Issue.id}
className="cursor-pointer"
className="cursor-pointer max-w-full"
onClick={() => {
issueSelectAction?.(issueData);
}}
@@ -48,7 +48,7 @@ export function IssuesTable({
)}
{(columns.title == null || columns.title === true) && (
<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) && (
<StatusTag
status={issueData.Issue.status}
@@ -73,11 +73,11 @@ export function IssuesTable({
username={assignee.username}
avatarURL={assignee.avatarURL}
textClass="text-xs"
className="ring-2 ring-background"
className="ring-1 ring-background"
/>
))}
{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}
</span>
)}

View File

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