The title bar does not completely cover sidebar texts

[object-kaz]

Describe the bug

The title bar can not completely cover sidebar texts.

Reproduction

1. clone this repo
2. run pnpm install
3. run pnpm build
4. run pnpm docs-dev
5. open the page and then click Guide
6. scroll the sidebar

Expected behavior

The title bar can completely cover the sidebar text.

System Info

System:
    OS: macOS 12.4
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 92.30 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.3.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Firefox: 91.4.1
    Safari: 15.5

Additional context

No response

Validations

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

[brc-dd]

What's the issue again? This is the output on my system:

[object-kaz]

What's the issue again? This is the output on my system:

It seems to be related to the width of the page.

[object-kaz]

Device Resolution: 2560 × 1600

Execute:

{clientWidth: document.documentElement.clientWidth, innerWidth: window.innerWidth, innerWidthScreen: screen.innerWidth, devicePixelRatio:window.devicePixelRatio}

Result:

{
    "clientWidth": 1425,
    "innerWidth": 1440,
    "devicePixelRatio": 2
}

[brc-dd]

Still not able to reproduce.

[object-kaz]

Still not able to reproduce.

Scrollbars may also have an impact.

Scrollbar width: 15px
Window width: 1440px

For selector .VPNavBar, padding-left=32px

For selector .VPNavBar>.container,max-width=1440px-64px=1376px,width=1440px-15px-64px=1361px<1376px

For selector .VPSidebar, 100% padding=1440px-15px=1425px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)=(1425px-(1440px-64px))/2=24.5px

[object-kaz]

I wrote two functions to calculate the padding:

let paddingLeftTitle = (width,scrollbarWidth) => (width-scrollbarWidth-Math.min(1376,width-scrollbarWidth-64))/2
let paddingLeftSidebar = (width,scrollbarWidth) => (width-scrollbarWidth-1376)/2

For $1440\le width<1440+scrollbarWidth$,
$paddingLeftTitle=32$
$paddingLeftSidebar=(width-scrollbarWidth-1376)/2<32$

For $width\ge 1440+scrollbarWidth$,
$paddingLeftTitle=(width-scrollbarWidth-1376)/2=paddingLeftSidebar$

[brc-dd]

Yeah, cool finally reproduced this 😅

[brc-dd]

Changing this seems to fix this:

vitepress/src/client/theme-default/components/VPSidebar.vue

Line 97 in e0b730a

padding-left: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2);

padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));

Check if this works fine for you too.

[object-kaz]

Changing this seems to fix this:

vitepress/src/client/theme-default/components/VPSidebar.vue

Line 97 in e0b730a

padding-left: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2);

padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));

Check if this works fine for you too.

Yes, it works!