fix(app): even spacing between sidebar Home, Search and New session (#57254)

Co-authored-by: Hona <10430890+Hona@users.noreply.github.com>
This commit is contained in:
opencode-agent[bot]
2026-10-20 11:55:13 +10:00
committed by GitHub
Unverified
parent fa2888b12e
commit f3f1fc7511
2 changed files with 21 additions and 9 deletions
+10
View File
@@ -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 [
+11 -9
View File
@@ -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