From a51a30398dfb6a4dddc7b3adbf80ccfb20a7cf79 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Mon, 27 Apr 2026 08:08:47 -0500
Subject: [PATCH] Fix sub-issue progress summary styling

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/IssuesList.test.tsx     | 3 ++-
 ui/src/components/IssuesList.tsx          | 4 ++--
 ui/src/lib/issue-detail-subissues.test.ts | 5 +++--
 ui/src/lib/issue-detail-subissues.ts      | 2 +-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/IssuesList.test.tsx b/ui/src/components/IssuesList.test.tsx
index 0d6d335896a..ba615dc2b2d 100644
--- a/ui/src/components/IssuesList.test.tsx
+++ b/ui/src/components/IssuesList.test.tsx
@@ -567,13 +567,14 @@ describe("IssuesList", () => {
     });
   });
 
-  it("hides the sub-issue progress summary unless it is enabled and populated", async () => {
+  it("hides the sub-issue progress summary unless it is enabled with multiple sub-issues", async () => {
     const { root } = renderWithQueryClient(
       <IssuesList
         issues={[createIssue()]}
         agents={[]}
         projects={[]}
         viewStateKey="paperclip:test-issues"
+        showProgressSummary
         onUpdateIssue={() => undefined}
       />,
       container,
diff --git a/ui/src/components/IssuesList.tsx b/ui/src/components/IssuesList.tsx
index 48a413a75e7..cce4e502738 100644
--- a/ui/src/components/IssuesList.tsx
+++ b/ui/src/components/IssuesList.tsx
@@ -390,7 +390,7 @@ function SubIssueProgressSummaryStrip({
     .filter((entry) => entry.count > 0);
 
   return (
-    <div className="rounded-md border border-border bg-muted/20 p-3">
+    <div className="border border-border bg-background p-3">
       <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
         <div className="min-w-0 flex-1 space-y-2">
           <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
@@ -424,7 +424,7 @@ function SubIssueProgressSummaryStrip({
           </div>
         </div>
 
-        <div className="min-w-0 rounded-md border border-border bg-background px-3 py-2 text-sm lg:w-72">
+        <div className="min-w-0 border border-border bg-background px-3 py-2 text-sm lg:w-72">
           {target && targetIssue ? (
             <>
               <div className="text-xs font-medium text-muted-foreground">
diff --git a/ui/src/lib/issue-detail-subissues.test.ts b/ui/src/lib/issue-detail-subissues.test.ts
index 586226ba894..611e677bd45 100644
--- a/ui/src/lib/issue-detail-subissues.test.ts
+++ b/ui/src/lib/issue-detail-subissues.test.ts
@@ -39,8 +39,9 @@ describe("shouldRenderRichSubIssuesSection", () => {
 });
 
 describe("shouldRenderSubIssueProgressSummary", () => {
-  it("requires both the opt-in flag and child issues", () => {
-    expect(shouldRenderSubIssueProgressSummary(true, 1)).toBe(true);
+  it("requires both the opt-in flag and multiple child issues", () => {
+    expect(shouldRenderSubIssueProgressSummary(true, 2)).toBe(true);
+    expect(shouldRenderSubIssueProgressSummary(true, 1)).toBe(false);
     expect(shouldRenderSubIssueProgressSummary(false, 1)).toBe(false);
     expect(shouldRenderSubIssueProgressSummary(true, 0)).toBe(false);
   });
diff --git a/ui/src/lib/issue-detail-subissues.ts b/ui/src/lib/issue-detail-subissues.ts
index 3bd3174ad67..e717bb24754 100644
--- a/ui/src/lib/issue-detail-subissues.ts
+++ b/ui/src/lib/issue-detail-subissues.ts
@@ -22,7 +22,7 @@ export function shouldRenderRichSubIssuesSection(childIssuesLoading: boolean, ch
 }
 
 export function shouldRenderSubIssueProgressSummary(enabled: boolean | undefined, childIssueCount: number): boolean {
-  return enabled === true && childIssueCount > 0;
+  return enabled === true && childIssueCount > 1;
 }
 
 export function buildSubIssueProgressSummary(issues: Issue[]): SubIssueProgressSummary {