fix(ui): scroll to cron run history

wyf027 · web-flow · commit 63fe5c74021d · 2026-06-28T19:18:26.000-07:00
diff --git a/ui/src/ui/views/cron.test.ts b/ui/src/ui/views/cron.test.ts
@@ -900,4 +900,42 @@ describe("cron view", () => {
       "cron-thinking-suggestions",
     ]);
   });
+
+  it("scrolls the run history card into view when History is clicked", () => {
+    vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => {
+      callback(0);
+      return 1;
+    });
+    const container = document.createElement("div");
+    document.body.append(container);
+    try {
+      const onLoadRuns = vi.fn();
+      render(
+        renderCron(
+          createProps({
+            jobs: [createJob("job-1")],
+            onLoadRuns,
+          }),
+        ),
+        container,
+      );
+
+      const runHistory = getElement(container, "[data-run-history]", HTMLElement);
+      const scrollIntoView = vi.fn();
+      Object.defineProperty(runHistory, "scrollIntoView", {
+        configurable: true,
+        value: scrollIntoView,
+      });
+
+      getButtonByText(container, "History").dispatchEvent(
+        new MouseEvent("click", { bubbles: true }),
+      );
+
+      expect(onLoadRuns).toHaveBeenCalledWith("job-1");
+      expect(scrollIntoView).toHaveBeenCalledWith({ behavior: "smooth", block: "start" });
+    } finally {
+      container.remove();
+      vi.unstubAllGlobals();
+    }
+  });
 });
diff --git a/ui/src/ui/views/cron.ts b/ui/src/ui/views/cron.ts
@@ -629,7 +629,7 @@ export function renderCron(props: CronProps) {
             : nothing}
         </section>
 
-        <section class="card">
+        <section class="card" data-run-history>
           <div
             class="row"
             style="justify-content: space-between; align-items: flex-start; gap: 12px;"
@@ -1691,6 +1691,15 @@ function renderJob(job: CronJob, props: CronProps) {
             @click=${(event: Event) => {
               event.stopPropagation();
               props.onLoadRuns(job.id);
+              requestAnimationFrame(() => {
+                const runHistory = document.querySelector("[data-run-history]");
+                if (
+                  runHistory instanceof HTMLElement &&
+                  typeof runHistory.scrollIntoView === "function"
+                ) {
+                  runHistory.scrollIntoView({ behavior: "smooth", block: "start" });
+                }
+              });
             }}
           >
             ${t("cron.jobList.history")}
