From 699a3c051c31858b8f76172be57a6e109869f9eb Mon Sep 17 00:00:00 2001
From: Hare <kei.hiracchi.0928@gmail.com>
Date: Wed, 30 Sep 2026 13:50:21 +0900
Subject: [PATCH] fix: restore centered turn navigation

---
 .../console_history_shell_test.ts             | 23 +++++++++++++------
 .../console/ConsoleTurnNavigation.svelte      |  2 ++
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/tools/web-ux/browser-tests/console_history_shell_test.ts b/tools/web-ux/browser-tests/console_history_shell_test.ts
index 936a3fe0a..5bf782b2d 100644
--- a/tools/web-ux/browser-tests/console_history_shell_test.ts
+++ b/tools/web-ux/browser-tests/console_history_shell_test.ts
@@ -113,9 +113,14 @@ async function checkConsoleHistory(viewportHeight: number): Promise<void> {
           controlHeight: control.getBoundingClientRect().height,
           boundaryOffset: boundary.getBoundingClientRect().top - element.getBoundingClientRect().top + element.scrollTop,
           firstOffset: first.getBoundingClientRect().top - boundary.getBoundingClientRect().top,
+          expectedOffset: Math.max(0, (element.getBoundingClientRect().height - element.children.length * 24) / 2),
         };
       });
-      assertEquals(initialGeometry, { boundaryHeight: 24, controlHeight: 24, boundaryOffset: 0, firstOffset: 24 });
+      assertEquals(initialGeometry.boundaryHeight, 24);
+      assertEquals(initialGeometry.controlHeight, 24);
+      assertEquals(initialGeometry.firstOffset, 24);
+      assert(Math.abs(initialGeometry.boundaryOffset - initialGeometry.expectedOffset) <= 1,
+        "short turn lists must be vertically centered, with overflowing lists starting at the top");
       assertEquals(await turnList.evaluate((element) => element.scrollHeight > element.clientHeight), viewportHeight === 340);
       const currentQuestionTop = await transcript
         .getByText("question 7", { exact: true })
@@ -202,11 +207,15 @@ async function checkConsoleHistory(viewportHeight: number): Promise<void> {
           element.dispatchEvent(new Event("scroll"));
         });
       } else {
-        // A short list cannot scroll: older turns take their natural place above
-        // existing bars instead of adding blank space to force a fixed anchor.
-        const firstOffset = await turnList.evaluate((element) =>
-          element.querySelector(".turn-button")!.getBoundingClientRect().top - element.getBoundingClientRect().top);
-        assertEquals(firstOffset, 24);
+        // A short list cannot scroll: keep the whole compact list centered
+        // rather than adding artificial space to force a fixed anchor.
+        const centerOffset = await turnList.evaluate((element) => {
+          const first = element.firstElementChild!.getBoundingClientRect();
+          const last = element.lastElementChild!.getBoundingClientRect();
+          const viewport = element.getBoundingClientRect();
+          return (first.top + last.bottom - viewport.top - viewport.bottom) / 2;
+        });
+        assert(Math.abs(centerOffset) <= 1, "short lists must remain centered after prepending history");
         await navigation.getByRole("button", { name: "Earlier conversation available" }).click();
       }
       await transcript.getByText("question 1", { exact: true }).waitFor();
@@ -255,6 +264,6 @@ async function checkConsoleHistory(viewportHeight: number): Promise<void> {
 }
 
 for (const viewportHeight of [600, 400, 340]) {
-  Deno.test(`production Console keeps compact top-aligned turns and pages history at ${viewportHeight}px`,
+  Deno.test(`production Console keeps compact centered turns and pages history at ${viewportHeight}px`,
     () => checkConsoleHistory(viewportHeight));
 }
diff --git a/web/workspace/src/lib/workspace/console/ConsoleTurnNavigation.svelte b/web/workspace/src/lib/workspace/console/ConsoleTurnNavigation.svelte
index c6b58fa34..27c7105dc 100644
--- a/web/workspace/src/lib/workspace/console/ConsoleTurnNavigation.svelte
+++ b/web/workspace/src/lib/workspace/console/ConsoleTurnNavigation.svelte
@@ -105,6 +105,8 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    /* Center short lists; overflowing lists stay reachable from the top. */
+    justify-content: safe center;
     height: 100%;
     overflow-y: auto;
     scrollbar-width: none;