From 22da0f2341d0bbf7c4a885f7b6988a0528f20d7f Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Sat, 1 Aug 2026 00:39:12 -0700
Subject: [PATCH] fix(dashboard): balance queued badge icon spacing

---
 packages/dashboard/app/components/TaskCard.css                | 4 ++++
 packages/dashboard/app/components/TaskCard.tsx                | 2 +-
 packages/dashboard/app/components/__tests__/TaskCard.test.tsx | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard/app/components/TaskCard.css b/packages/dashboard/app/components/TaskCard.css
index 6fc6a01834..b4c9bd9edf 100644
--- a/packages/dashboard/app/components/TaskCard.css
+++ b/packages/dashboard/app/components/TaskCard.css
@@ -264,6 +264,10 @@ Lock the id to the same chip-height row as .card-header-actions so the task id,
   margin-inline-start: calc(var(--space-xs) / 2);
 }
 
+.card-status-badge--queued-with-reason {
+  padding-inline-end: calc(var(--space-xs) / 2);
+}
+
 /*
 FNXC:WorkflowBoard 2026-06-29-00:00:
 Aggregate Board cards need a compact workflow-name badge so operators can identify each card's source workflow while shared columns combine multiple workflows. The badge is opt-in metadata from Board and uses neutral card tokens so non-board TaskCard callers do not render empty workflow shells.
diff --git a/packages/dashboard/app/components/TaskCard.tsx b/packages/dashboard/app/components/TaskCard.tsx
index 53cf572435..a2891ec5f4 100644
--- a/packages/dashboard/app/components/TaskCard.tsx
+++ b/packages/dashboard/app/components/TaskCard.tsx
@@ -3557,7 +3557,7 @@ function TaskCardComponent({
         )}
         {(showStatusBadge || showQueuedToPlanBadge || showQueuedBadge) && (
           <span
-            className={`card-status-badge card-status-badge--${task.column}${showQueuedToPlanBadge ? " queued-to-plan" : ""}${isAwaitingApproval ? " awaiting-approval" : ""}${isPlanReviewReplanCapApproval ? " awaiting-approval--plan-review-replan-cap" : ""}${isAwaitingInput ? " awaiting-input" : ""}${isAgentActive ? " pulsing" : ""}${isFailed ? " failed" : ""}${isStuck ? " stuck" : ""}`}
+            className={`card-status-badge card-status-badge--${task.column}${showQueuedToPlanBadge ? " queued-to-plan" : ""}${showQueuedBadge && (task.overlapBlockedBy || task.blockedBy) ? " card-status-badge--queued-with-reason" : ""}${isAwaitingApproval ? " awaiting-approval" : ""}${isPlanReviewReplanCapApproval ? " awaiting-approval--plan-review-replan-cap" : ""}${isAwaitingInput ? " awaiting-input" : ""}${isAgentActive ? " pulsing" : ""}${isFailed ? " failed" : ""}${isStuck ? " stuck" : ""}`}
             title={
               isPlanReviewReplanCapApproval
                 ? t(
diff --git a/packages/dashboard/app/components/__tests__/TaskCard.test.tsx b/packages/dashboard/app/components/__tests__/TaskCard.test.tsx
index fd499e80c6..53c928b856 100644
--- a/packages/dashboard/app/components/__tests__/TaskCard.test.tsx
+++ b/packages/dashboard/app/components/__tests__/TaskCard.test.tsx
@@ -4892,6 +4892,7 @@ describe("TaskCard", () => {
 
     const badge = screen.getByText("Queued").closest(".card-status-badge") as HTMLElement;
     expect(badge).toHaveTextContent(/^Queued$/);
+    expect(badge).toHaveClass("card-status-badge--queued-with-reason");
     const icon = badge.querySelector(`[data-testid="${expectedIcon}-${queuedTask.id}"]`);
     expect(icon).not.toBeNull();
     expect(icon).toHaveClass("card-queued-reason-icon");