vitepress

vitepress copied to clipboard

Describe the bug

long words can make a horizontal scroll bar and now '.VPLocalNav' sticky bar can not work good

long words like: a link that wirte directly without use []() in md, and it`s length too long to make a horizonta scroll bar

Reproduction

write a long word directly in md, and open page with mobile or any smaller screen devices that can let sticky nav bar show up, now slide down, you can notice the sticky bar scroll out the screen without stop in the top

word like: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Expected behavior

choose an suitable way to make word wrap is good.

now, i just use a style to break words, maybe a rude way...

* {
  word-break:break-all !important;
}

System Info

System:
    OS: Linux 5.18 Arch Linux
    CPU: (16) x64 AMD Ryzen 7 PRO 5850U with Radeon Graphics
    Memory: 22.90 GB / 30.26 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 16.15.1 - /run/user/1000/fnm_multishells/165824_1655004870506/bin/node
    npm: 8.11.0 - /run/user/1000/fnm_multishells/165824_1655004870506/bin/npm
  Browsers:
    Chromium: 102.0.5005.115
  npmPackages:
    vitepress: 1.0.0-alpha.1 => 1.0.0-alpha.1

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Sorry can we have screenshot for this? VPLocalNav don't have props value or anything so I'm not sure what youre talking about 🤔

Sorry can we have screenshot for this? VPLocalNav don't have props value or anything so I'm not sure what youre talking about thinking

I recorded a video, please pay attention to the sticky bar at the top

https://user-images.githubusercontent.com/49447191/173604064-bc18fade-f7f6-455a-b17c-2a9fa69ca391.mp4

Oh OK... well what the hell 😅 OK, so seems like if the body content exceeds the screen width, this happens... hmmm...

Maybe adding word-break: break-word; to .vp-doc p is enough to fix this, but I think we should check if it breaks any other elements 👀

Also fix this one:

• #1088

Maybe adding word-break: break-word; to .vp-doc p is enough to fix this,

I guess we need this on all elements?