From 411a9a5168cb04eca6b7eba45578b96d1588a0e5 Mon Sep 17 00:00:00 2001
From: Tonio <tonework@gmail.com>
Date: Fri, 19 Jun 2026 14:39:06 -0700
Subject: [PATCH] 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>
---
 ui/src/components/IssueColumns.tsx | 2 +-
 ui/src/components/IssuesList.tsx   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/IssueColumns.tsx b/ui/src/components/IssueColumns.tsx
index dd68f84aca..4e5ab07b9d 100644
--- a/ui/src/components/IssueColumns.tsx
+++ b/ui/src/components/IssueColumns.tsx
@@ -151,7 +151,7 @@ export function InboxIssueMetaLeading({
   return (
     <>
       {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} />}
         </span>
       ) : null}
diff --git a/ui/src/components/IssuesList.tsx b/ui/src/components/IssuesList.tsx
index 54a8016e9c..b1781e52c9 100644
--- a/ui/src/components/IssuesList.tsx
+++ b/ui/src/components/IssuesList.tsx
@@ -1786,7 +1786,7 @@ export function IssuesList({
                               <ChevronRight className={cn("h-3.5 w-3.5 transition-transform", isExpanded && "rotate-90")} />
                             </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 })} />
                             </span>
                           )
@@ -1812,7 +1812,7 @@ export function IssuesList({
                               showIdentifier={visibleIssueColumnSet.has("id") && availableIssueColumnSet.has("id")}
                               checklistStepNumber={checklistStepNumber}
                               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 })} />
                                 </span>
                               )}