From f3f1fc751113e2dbaf1ddf4b533e924f7c4e2c83 Mon Sep 17 00:00:00 2001
From: "opencode-agent[bot]"
 <219766164+opencode-agent[bot]@users.noreply.github.com>
Date: Tue, 20 Oct 2026 11:55:13 +1000
Subject: [PATCH] fix(app): even spacing between sidebar Home, Search and New
 session (#57254)

Co-authored-by: Hona <10430890+Hona@users.noreply.github.com>
---
 packages/app/e2e/regression/tabs.spec.ts     | 10 ++++++++++
 packages/app/src/shell/titlebar/titlebar.tsx | 20 +++++++++++---------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/app/e2e/regression/tabs.spec.ts b/packages/app/e2e/regression/tabs.spec.ts
index 17908249d01..830506b563b 100644
--- a/packages/app/e2e/regression/tabs.spec.ts
+++ b/packages/app/e2e/regression/tabs.spec.ts
@@ -366,6 +366,16 @@ test("vertical tabs resize, scroll, show shortcut hints, and navigate", async ({
   await expect(sidebar).toHaveCSS("width", "260px")
   await expect(page.locator('[data-slot="titlebar-tabs"]')).toHaveCount(0)
 
+  const actions = await Promise.all(
+    ["vertical-tabs-home", "vertical-tabs-search", "vertical-tabs-new-session"].map(async (action) => {
+      const box = await sidebar.locator(`[data-action="${action}"]`).boundingBox()
+      if (!box) throw new Error(`${action} is not rendered`)
+      return box
+    }),
+  )
+  const gaps = actions.slice(1).map((box, index) => box.y - (actions[index].y + actions[index].height))
+  expect(gaps).toEqual([4, 4])
+
   const handle = sidebar.locator('[data-component="resize-handle"]')
 
   for (const [offset, width] of [
diff --git a/packages/app/src/shell/titlebar/titlebar.tsx b/packages/app/src/shell/titlebar/titlebar.tsx
index a5402952e3d..bcfb76d69e3 100644
--- a/packages/app/src/shell/titlebar/titlebar.tsx
+++ b/packages/app/src/shell/titlebar/titlebar.tsx
@@ -426,7 +426,7 @@ export function Titlebar(props: { verticalTabs?: { mount?: HTMLElement } }) {
                   data-titlebar-tab-action
                   data-action="vertical-tabs-home"
                   data-state={layout.route().type === "home" ? "pressed" : undefined}
-                  class="group mb-1 flex h-7 w-full shrink-0 items-center gap-1.5 rounded-[6px] ps-1.5 pe-2 text-[13px] leading-4 text-v2-text-text-faint hover:text-v2-text-text-base data-[state=pressed]:text-v2-text-text-base"
+                  class="group flex h-7 w-full shrink-0 items-center gap-1.5 rounded-[6px] ps-1.5 pe-2 text-[13px] leading-4 text-v2-text-text-faint hover:text-v2-text-text-base data-[state=pressed]:text-v2-text-text-base"
                   onClick={toggleHome}
                   aria-label={language.t("home.title")}
                   aria-pressed={layout.route().type === "home"}
@@ -776,7 +776,7 @@ export function Titlebar(props: { verticalTabs?: { mount?: HTMLElement } }) {
                               <div
                                 class="flex w-full shrink-0 gap-2"
                                 classList={{
-                                  "items-start pt-2.5": homeInSidebarHeader(),
+                                  "items-start pt-2.5 pb-1": homeInSidebarHeader(),
                                   "mb-2 h-12 items-center": !homeInSidebarHeader(),
                                 }}
                                 style={{
@@ -800,13 +800,15 @@ export function Titlebar(props: { verticalTabs?: { mount?: HTMLElement } }) {
                                 <SidebarToggle />
                               </div>
                             </Show>
-                            <Show when={!homeInSidebarHeader()}>{homeButton(true)}</Show>
-                            {searchButton(true)}
-                            <RecentlyClosedTabsMenu
-                              vertical
-                              onNewTab={openNewTab}
-                              keybind={command.keybind("tab.new")}
-                            />
+                            <div class="flex w-full shrink-0 flex-col gap-1">
+                              <Show when={!homeInSidebarHeader()}>{homeButton(true)}</Show>
+                              {searchButton(true)}
+                              <RecentlyClosedTabsMenu
+                                vertical
+                                onNewTab={openNewTab}
+                                keybind={command.keybind("tab.new")}
+                              />
+                            </div>
                             <div class="h-4 w-full shrink-0" aria-hidden="true" />
                             <div class="flex min-h-0 flex-1 flex-col gap-1">
                               <Show