From f99da2789153e648c65d347b37bdd1f017ce783b Mon Sep 17 00:00:00 2001
From: Hare <kei.hiracchi.0928@gmail.com>
Date: Thu, 1 Oct 2026 13:30:22 +0900
Subject: [PATCH] fix: tighten sidebar footer spacing and inset divider

---
 .../console_history_shell_test.ts             | 19 ++++++++++++++++++-
 .../src/lib/workspace/sidebar/sidebar.css     | 13 +++++++++++--
 2 files changed, 29 insertions(+), 3 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 462a75746..36e06cedf 100644
--- a/tools/web-ux/browser-tests/console_history_shell_test.ts
+++ b/tools/web-ux/browser-tests/console_history_shell_test.ts
@@ -96,7 +96,16 @@ async function checkSidebarSlide(page: Page, mobile: boolean, opening: boolean):
     const content = frame.querySelector<HTMLElement>(".sidebar-frame-content")!;
     const main = document.querySelector<HTMLElement>(".app-shell__main")!;
     const moving = mobile ? frame : content;
+    const footer = frame.querySelector<HTMLElement>(".sidebar-control-row")!;
+    const pin = frame.querySelector<HTMLElement>(".sidebar-fold-button")!;
     const sample = () => ({
+      footerWidth: footer.getBoundingClientRect().width,
+      footerHeight: footer.getBoundingClientRect().height,
+      dividerLeft: parseFloat(getComputedStyle(footer, "::before").left),
+      dividerRight: parseFloat(getComputedStyle(footer, "::before").right),
+      footerBorder: getComputedStyle(footer).borderTopWidth,
+      pinWidth: pin.getBoundingClientRect().width,
+      pinHeight: pin.getBoundingClientRect().height,
       x: moving.getBoundingClientRect().x,
       width: moving.getBoundingClientRect().width,
       frameWidth: frame.getBoundingClientRect().width,
@@ -132,7 +141,13 @@ async function checkSidebarSlide(page: Page, mobile: boolean, opening: boolean):
   const { before, middle, after } = result;
   for (const sample of [before, middle, after]) {
     assert(Math.abs(sample.pinLeft - 8) <= 1, "Pin must stay at the sidebar's left edge");
-    assert(Math.abs(sample.pinBottom - 16) <= 1, "Pin must stay at the sidebar's bottom edge");
+    assert(Math.abs(sample.pinBottom - 8) <= 1, "Pin must stay at the sidebar's bottom edge");
+    assertEquals(sample.pinWidth, 32);
+    assertEquals(sample.pinHeight, 32);
+    assertEquals(sample.footerHeight, 48, "footer keeps compact, equal padding");
+    assertEquals(sample.dividerLeft, 8);
+    assertEquals(sample.dividerRight, 8);
+    assertEquals(sample.footerBorder, "0px", "divider must not touch the sidebar edges");
   }
   assert(opening ? before.x < middle.x && middle.x < after.x : before.x > middle.x && middle.x > after.x,
     `sidebar must slide horizontally through an intermediate position: ${JSON.stringify(result)}`);
@@ -143,6 +158,8 @@ async function checkSidebarSlide(page: Page, mobile: boolean, opening: boolean):
   assertEquals(before.mainHeight, after.mainHeight);
   assertEquals(after.frameWidth, before.frameWidth, "hover mode keeps a fixed rail width");
   if (!mobile) {
+    const folded = opening ? before : after;
+    assertEquals(folded.footerWidth, folded.footerHeight, "folded footer must be square");
     assert(opening ? before.panelWidth < middle.panelWidth && middle.panelWidth < after.panelWidth
       : before.panelWidth > middle.panelWidth && middle.panelWidth > after.panelWidth,
       "the overlay panel must expand past the rail and contract again");
diff --git a/web/workspace/src/lib/workspace/sidebar/sidebar.css b/web/workspace/src/lib/workspace/sidebar/sidebar.css
index 52536ab09..dc2eaf3c9 100644
--- a/web/workspace/src/lib/workspace/sidebar/sidebar.css
+++ b/web/workspace/src/lib/workspace/sidebar/sidebar.css
@@ -143,12 +143,21 @@
     outline-offset: 1px;
   }
   .sidebar-control-row {
+    position: relative;
     display: flex;
     flex: 0 0 auto;
     justify-content: flex-start;
     gap: var(--space-1);
-    border-top: 1px solid var(--line);
-    padding: var(--space-4) var(--space-2);
+    padding: var(--space-2);
+  }
+  .sidebar-control-row::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    inset-inline: var(--space-2);
+    height: 1px;
+    background: var(--line);
+    pointer-events: none;
   }
   .workspace-label {
     flex: 1 1 auto;