fix(ui): center completed progress marker (#128911)

Co-authored-by: roboclaw-bot <309084314+roboclaw-bot@users.noreply.github.com>
Co-authored-by: Tak Hoffman <781889+Takhoffman@users.noreply.github.com>

ui/src/e2e/session-progress-live-placement.e2e.test.ts

@@ -138,7 +138,7 @@ suite.define(() => {
     );
   });
 
-  it("dismisses a completed card across rerender and reload", async () => {
+  it("centers the completed marker and dismisses the card across disclosure and reload", async () => {
     const sessionKey = "agent:main:progress-complete";
     const plan = [
       { step: "Inspected owner", status: "completed" },
@@ -188,7 +188,23 @@ suite.define(() => {
           await expect.poll(() => gateway.getRequests("progressCard.get")).toHaveLength(1);
           const card = page.locator('[data-progress-card-placement="composer"]');
           await expect.poll(() => card.isVisible()).toBe(true);
+          const expectMarkerCentered = async () => {
+            const summaryBounds = await card.locator("summary").boundingBox();
+            const markerBounds = await card
+              .locator('.session-progress-card__current-marker[data-status="completed"]')
+              .boundingBox();
+            expect(summaryBounds).not.toBeNull();
+            expect(markerBounds).not.toBeNull();
+            if (!summaryBounds || !markerBounds) {
+              return;
+            }
+            const summaryCenterY = summaryBounds.y + summaryBounds.height / 2;
+            const markerCenterY = markerBounds.y + markerBounds.height / 2;
+            expect(Math.abs(summaryCenterY - markerCenterY)).toBeLessThanOrEqual(0.5);
+          };
+          await expectMarkerCentered();
           await card.locator("summary").click();
+          await expectMarkerCentered();
           await captureProof(page, `completed-${colorScheme}-before.png`);
 
           await card.getByRole("button", { name: "Dismiss progress card" }).click();

ui/src/styles/chat/progress-card.css

@@ -479,7 +479,6 @@
   height: var(--session-progress-marker-size);
   align-items: center;
   justify-content: center;
-  align-self: start;
   flex: none;
   padding: 0;
   margin: 0;