From e9215cbfdd3dc3ff3d179902f49f2c0653181161 Mon Sep 17 00:00:00 2001
From: lllleolin-max <244385774+lllleolin-max@users.noreply.github.com>
Date: Sat, 12 Sep 2026 14:39:01 +0800
Subject: [PATCH] fix(theme): avoid sidebar spacing without a sidebar

Reserve the navbar title column only when a sidebar is present.
Add browser coverage for home, sidebar-free, 404, and sidebar pages.

Fixes vuejs/vitepress#5426

Assisted-by: OpenAI Codex
---
 __tests__/e2e/navbar/navbar.test.ts           | 30 +++++++++++++++++++
 __tests__/e2e/navbar/no-sidebar.md            |  7 +++++
 .../theme-default/components/VPNavBar.vue     | 10 ++-----
 3 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 __tests__/e2e/navbar/navbar.test.ts
 create mode 100644 __tests__/e2e/navbar/no-sidebar.md

diff --git a/__tests__/e2e/navbar/navbar.test.ts b/__tests__/e2e/navbar/navbar.test.ts
new file mode 100644
index 000000000..5cad88fc8
--- /dev/null
+++ b/__tests__/e2e/navbar/navbar.test.ts
@@ -0,0 +1,30 @@
+describe('navbar layout', () => {
+  test.each([959, 960, 1440])(
+    'reserves space beside the title only for a visible sidebar at %ipx',
+    async (width) => {
+      await page.setViewportSize({ width, height: 720 })
+
+      const searchOffset = async (path: string) => {
+        await goto(path)
+        await page.evaluate(() => document.fonts.ready)
+
+        const title = await page.locator('.VPNavBarTitle').boundingBox()
+        const search = await page.locator('.VPNavBarSearch').boundingBox()
+        return search!.x - title!.x
+      }
+
+      const homeOffset = await searchOffset('/')
+
+      for (const path of ['/navbar/no-sidebar', '/missing-page']) {
+        expect(await searchOffset(path)).toBeCloseTo(homeOffset, 0)
+      }
+
+      const sidebarOffset = await searchOffset('/home')
+      if (width >= 960) {
+        expect(sidebarOffset).toBeGreaterThan(homeOffset)
+      } else {
+        expect(sidebarOffset).toBeCloseTo(homeOffset, 0)
+      }
+    }
+  )
+})
diff --git a/__tests__/e2e/navbar/no-sidebar.md b/__tests__/e2e/navbar/no-sidebar.md
new file mode 100644
index 000000000..bb2727373
--- /dev/null
+++ b/__tests__/e2e/navbar/no-sidebar.md
@@ -0,0 +1,7 @@
+---
+sidebar: false
+---
+
+# Page without a sidebar
+
+The navigation title should keep its natural width when the sidebar is hidden.
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 81c84c1e7..a0a97633c 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -193,14 +193,10 @@ const overflow = provideNavOverflow({
 }
 
 @media (min-width: 60rem) {
-  /* outside home the title column matches the sidebar column, so search and
-     menu sit at the same spot on every doc page; on home the title keeps its
-     natural width and search sits right next to it */
-  .VPNavBar:not(.home) .title {
-    min-width: calc(var(--vp-sidebar-width) - 2rem);
-  }
-
+  /* reserve the sidebar column only when it is present; otherwise the title
+     keeps its natural width and search sits right next to it */
   .VPNavBar.has-sidebar .title {
+    min-width: calc(var(--vp-sidebar-width) - 2rem);
     max-width: calc(var(--vp-sidebar-width) - 2rem);
   }
 }