Outline overflows navbar when sidebar not present

[elringus]

Describe the bug

When sidebar is not present, the page is not scrolled and outline is scrolled down, it overflows the navbar.

Reproduction

https://stackblitz.com/edit/vite-v81ufa

1. Make sure width is high enough so that outline is shown
2. Without scrolling the main page content hover over the outline and scroll down
3. Observe that the outline overflows the navbar

Expected behavior

Outline is clipped when over navbar in the same way when sidebar is present.

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 Intel(R) Core(TM) i7-6900K CPU @ 3.20GHz
    Memory: 45.66 GB / 63.92 GB
  Binaries:
    Node: 18.2.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 9.6.6 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 113.0.5672.127
    Edge: Spartan (44.19041.1266.0), Chromium (113.0.1774.50)
  npmPackages:
    vitepress: ^1.0.0-beta.1 => 1.0.0-beta.1

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[elringus]

UPD: The navbar is also not clipping the underlying content when navigating to an anchor. Example: https://naninovel.github.io/api/#print — notice how both the page content and outline overflow the navbar. It starts to work correctly only after the page is scrolled up to the start and then back down.

[elringus]

I'll try to fix this. If anyone have any tips on where to look at, please share.

[elringus]

So in the end I've fixed this with a simple css override making the navbar semi-transparent with blur filter. It both looks better and provide better UX visually expanding content space. Coincidentally, it also allows to remove .curtain element which is blocking user input while being mostly transparent (the thing that appears below navbar when scrolling down for some kind of fade off effect).

vid.mp4

If anyone is interested here is the css I've used:

:root {
    --nav-c-bg: rgba(255, 255, 255, 0.5);
}

.dark {
    --nav-c-bg: rgba(30, 30, 32, 0.5);
}

.curtain {
    display: none !important;
}

.fill {
    background: transparent !important;
}

.content-body {
    background: var(--nav-c-bg) !important;
}

.content-body::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: saturate(180%) blur(5px);
    z-index: -1;
}