fix: address PR 3744 UI follow-ups

ui/src/components/IssueProperties.test.tsx

@@ -323,6 +323,9 @@ describe("IssueProperties", () => {
     const selectedParentTrigger = Array.from(container.querySelectorAll("button"))
       .find((button) => button.textContent?.includes("PAP-2 Candidate parent"));
     expect(selectedParentTrigger).not.toBeUndefined();
+    const parentLink = container.querySelector('a[href="/issues/PAP-2"]');
+    expect(parentLink).not.toBeNull();
+    expect(selectedParentTrigger!.contains(parentLink)).toBe(false);
 
     await act(async () => {
       selectedParentTrigger!.dispatchEvent(new MouseEvent("click", { bubbles: true }));

ui/src/components/IssueProperties.tsx

@@ -708,17 +708,19 @@ export function IssueProperties({
     <span className="text-sm break-words min-w-0 inline">
       {parentIdentifier ? `${parentIdentifier} ` : ""}
       {parentTitle}
-      <Link
-        to={`/issues/${parentIdentifier ?? issue.parentId}`}
-        className="inline-flex items-center justify-center h-4 w-4 rounded hover:bg-accent/50 transition-colors text-muted-foreground hover:text-foreground ml-0.5 align-middle"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <ArrowUpRight className="h-3 w-3" />
-      </Link>
     </span>
   ) : (
     <span className="text-sm text-muted-foreground">No parent</span>
   );
+  const parentLink = issue.parentId ? (
+    <Link
+      to={`/issues/${parentIdentifier ?? issue.parentId}`}
+      className="inline-flex items-center justify-center h-5 w-5 rounded hover:bg-accent/50 transition-colors text-muted-foreground hover:text-foreground"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <ArrowUpRight className="h-3 w-3" />
+    </Link>
+  ) : undefined;
   const parentOptions = (allIssues ?? [])
     .filter((candidate) => candidate.id !== issue.id)
     .filter((candidate) => !descendantIssueIds.has(candidate.id))
@@ -944,6 +946,7 @@ export function IssueProperties({
           triggerContent={parentTrigger}
           triggerClassName="min-w-0 max-w-full"
           popoverClassName="w-72"
+          extra={parentLink}
         >
           {parentContent}
         </PropertyPicker>

ui/src/components/IssuesList.test.tsx

@@ -421,6 +421,47 @@ describe("IssuesList", () => {
     });
   });
 
+  it("skips deferred row sizing for expanded parent rows with visible children", async () => {
+    const parentIssue = createIssue({
+      id: "issue-parent",
+      identifier: "PAP-1",
+      title: "Parent issue",
+    });
+    const childIssue = createIssue({
+      id: "issue-child",
+      identifier: "PAP-2",
+      title: "Child issue",
+      parentId: "issue-parent",
+    });
+
+    const { root } = renderWithQueryClient(
+      <IssuesList
+        issues={[parentIssue, childIssue]}
+        agents={[]}
+        projects={[]}
+        viewStateKey="paperclip:test-issues"
+        onUpdateIssue={() => undefined}
+      />,
+      container,
+    );
+
+    await waitForAssertion(() => {
+      const rows = Array.from(container.querySelectorAll('[data-testid="issue-row"]'));
+      const parentRow = rows.find((row) => row.textContent?.includes("Parent issue"));
+      const childRow = rows.find((row) => row.textContent?.includes("Child issue"));
+      expect(parentRow).not.toBeUndefined();
+      expect(childRow).not.toBeUndefined();
+      expect((parentRow?.parentElement as HTMLDivElement | null)?.style.contentVisibility).toBe("");
+      expect((parentRow?.parentElement as HTMLDivElement | null)?.style.containIntrinsicSize).toBe("");
+      expect((childRow?.parentElement as HTMLDivElement | null)?.style.contentVisibility).toBe("auto");
+      expect((childRow?.parentElement as HTMLDivElement | null)?.style.containIntrinsicSize).toBe("44px");
+    });
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
   it("uses context-scoped persisted column visibility", async () => {
     localStorage.setItem("paperclip:test-issues:company-1:issue-columns", JSON.stringify(["id", "assignee"]));
 

ui/src/components/IssuesList.tsx

@@ -835,6 +835,7 @@ export function IssuesList({
                   const hasChildren = children.length > 0;
                   const totalDescendants = hasChildren ? countDescendants(issue.id, childMap) : 0;
                   const isExpanded = !viewState.collapsedParents.includes(issue.id);
+                  const useDeferredRowRendering = !(hasChildren && isExpanded);
                   const issueProject = issue.projectId ? projectById.get(issue.projectId) ?? null : null;
                   const parentIssue = issue.parentId ? issueById.get(issue.parentId) ?? null : null;
                   const toggleCollapse = (e: { preventDefault: () => void; stopPropagation: () => void }) => {
@@ -852,8 +853,12 @@ export function IssuesList({
                       key={issue.id}
                       style={{
                         ...(depth > 0 ? { paddingLeft: `${depth * 16}px` } : {}),
-                        contentVisibility: "auto",
-                        containIntrinsicSize: "44px",
+                        ...(useDeferredRowRendering
+                          ? {
+                            contentVisibility: "auto",
+                            containIntrinsicSize: "44px",
+                          }
+                          : {}),
                       }}
                     >
                       <IssueRow

ui/src/components/transcript/RunTranscriptView.test.tsx

@@ -54,8 +54,8 @@ describe("RunTranscriptView", () => {
     );
 
     expect(html).toContain("<strong>world</strong>");
-    expect(html).toContain("<li>first</li>");
-    expect(html).toContain("<li>second</li>");
+    expect(html).toMatch(/<li[^>]*>first<\/li>/);
+    expect(html).toMatch(/<li[^>]*>second<\/li>/);
   });
 
   it("hides saved-session resume skip stderr from nice mode normalization", () => {
@@ -106,8 +106,8 @@ describe("RunTranscriptView", () => {
     );
 
     expect(html).toContain("<h2>Summary</h2>");
-    expect(html).toContain("<li>fixed deploy config</li>");
-    expect(html).toContain("<li>posted issue update</li>");
+    expect(html).toMatch(/<li[^>]*>fixed deploy config<\/li>/);
+    expect(html).toMatch(/<li[^>]*>posted issue update<\/li>/);
     expect(html).not.toContain("result");
   });
 });