RomanNum3ral
/
paperclip
mirror of https://github.com/paperclipai/paperclip.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(ui): vertically center task status circle with text in task list 

The Tasks page status circle aligned to the text baseline instead of the
optical center, sitting ~3.5px above the identifier + title. The circle
(inline-flex h-4 w-4) was wrapped in a plain inline span (no flex), so it
baseline-aligned. Center it via flex like the Inbox row path: add
items-center to the InboxIssueMetaLeading status slot and make the clickable
status wrappers inline-flex. Alignment-only; no size/color/semantic change.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Tonio 2026-06-19 14:39:06 -07:00
parent 6a3f5b685d
commit 411a9a5168
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/IssueColumns.tsx
View File

@ -151,7 +151,7 @@ export function InboxIssueMetaLeading({
return ( return (
<> <>
{showStatus ? ( {showStatus ? (
<span className="hidden shrink-0 sm:inline-flex"> <span className="hidden shrink-0 items-center sm:inline-flex">
{statusSlot ?? <StatusIcon status={issue.status} blockerAttention={issue.blockerAttention} />} {statusSlot ?? <StatusIcon status={issue.status} blockerAttention={issue.blockerAttention} />}
</span> </span>
) : null} ) : null}

4
ui/src/components/IssuesList.tsx
View File

@ -1786,7 +1786,7 @@ export function IssuesList({
<ChevronRight className={cn("h-3.5 w-3.5 transition-transform", isExpanded && "rotate-90")} /> <ChevronRight className={cn("h-3.5 w-3.5 transition-transform", isExpanded && "rotate-90")} />
</button> </button>
) : ( ) : (
<span onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}> <span className="inline-flex" onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
<StatusIcon status={issue.status} blockerAttention={issue.blockerAttention} onChange={(s) => onUpdateIssue(issue.id, { status: s })} /> <StatusIcon status={issue.status} blockerAttention={issue.blockerAttention} onChange={(s) => onUpdateIssue(issue.id, { status: s })} />
</span> </span>
) )
@ -1812,7 +1812,7 @@ export function IssuesList({
showIdentifier={visibleIssueColumnSet.has("id") && availableIssueColumnSet.has("id")} showIdentifier={visibleIssueColumnSet.has("id") && availableIssueColumnSet.has("id")}
checklistStepNumber={checklistStepNumber} checklistStepNumber={checklistStepNumber}
statusSlot={( statusSlot={(
<span onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}> <span className="inline-flex" onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
<StatusIcon status={issue.status} blockerAttention={issue.blockerAttention} onChange={(s) => onUpdateIssue(issue.id, { status: s })} /> <StatusIcon status={issue.status} blockerAttention={issue.blockerAttention} onChange={(s) => onUpdateIssue(issue.id, { status: s })} />
</span> </span>
)} )}