fix(theme): truncate long nav title with ellipsis

__tests__/e2e/.vitepress/config.ts

@@ -173,7 +173,8 @@ const sidebar: DefaultTheme.Config['sidebar'] = {
 }
 
 export default defineConfig({
-  title: 'Example',
+  title:
+    'Example with an exceedingly long site title that surely overflows the sidebar width',
   description: 'An example app using VitePress.',
   srcExclude: ['**/parts/**'],
   markdown: {

__tests__/e2e/nav-title.test.ts

@@ -0,0 +1,26 @@
+describe('nav title overflow', () => {
+  beforeAll(async () => {
+    await goto('/frontmatter/multiple-levels-outline')
+  })
+
+  test('title text does not overflow the sidebar', async () => {
+    const spanBox = await page
+      .locator('.VPNavBarTitle .title span')
+      .boundingBox()
+    const sidebarBox = await page.locator('.VPSidebar').boundingBox()
+
+    expect(spanBox).not.toBeNull()
+    expect(sidebarBox).not.toBeNull()
+    expect(spanBox!.x + spanBox!.width).toBeLessThanOrEqual(
+      sidebarBox!.x + sidebarBox!.width
+    )
+  })
+
+  test('title text is truncated with ellipsis', async () => {
+    const truncated = await page
+      .locator('.VPNavBarTitle .title span')
+      .evaluate((el) => el.scrollWidth > el.clientWidth)
+
+    expect(truncated).toBe(true)
+  })
+})

src/client/theme-default/components/VPNavBarTitle.vue

@@ -59,6 +59,11 @@ const target = computed(() =>
   transition: opacity 0.25s;
 }
 
+.title span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 @media (min-width: 60rem) {
   .title {
     flex-shrink: 0;