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

@@ -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)
+      }
+    }
+  )
+})

__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.

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
+  /* reserve the sidebar column only when it is present; otherwise the title
-     menu sit at the same spot on every doc page; on home the title keeps its
+     keeps its natural width and search sits right next to it */
-     natural width and search sits right next to it */
-  .VPNavBar:not(.home) .title {
-    min-width: calc(var(--vp-sidebar-width) - 2rem);
-  }
-
   .VPNavBar.has-sidebar .title {
+    min-width: calc(var(--vp-sidebar-width) - 2rem);
     max-width: calc(var(--vp-sidebar-width) - 2rem);
   }
 }