fix(theme): avoid layout shift caused by scrollbar

[zqianem]

fixes #1054

Previously, the disappearance of non-overlay scrollbars (the default for Chromium on Windows and Linux) changed width of the body element and its descendants, causing the whole page to shift slightly to right. This occurred in two cases:

1. Opening the search modal
2. Switching to a page without enough content

This change avoids the shift by using by 100vw (which isn't changed by the presence of a scrollbar) instead of 100% where appropriate.

Tested in Firefox and Chromium on Linux, could use a quick test on Safari with MacOS set to always show scrollbars.

Some caveats:

• only fixes layout shift for screen sizes >= 768px to avoid the scrollbar from overlapping the UI on smaller screens (the search modal becomes fullscreen at this size, so the shift is only visible in case 2 above)
• requires hiding overflow on body to avoid a horizontal scrollbar

I initially tried using the scrollbar-gutter rule but ran into trouble getting the modal backdrop and other content overlap the gutter. Then I tried using #app as the scroll container instead of html but that broke a lot of things 🥲.

Also, is the is-home class needed on VPContent? I couldn't figure out what effect it had and needed to override it anyways to get the other rule to work, so hopefully it is okay I removed it.

[brc-dd]

This looks more weird to me although it has no layout shift (because of shift towards right when non-overlay scrollbar is there). Layout shift when opening the search can likely be fixed in a different way. Not so sure about the second case though.

[zqianem]

The shift towards the right makes the non-overlay scrollbar layout match the overlay scrollbar layout width-wise, but that is a just a side effect of the fix. I don't think there is a better way to fix the shift.

The traditional way of addressing the shift when a modal opens is using JS to add a padding-right to the body equal to the scrollbar width, which is already implemented in Vitepress when opening the sidebar menu on smaller screens (< 960px). However this doesn't work for the search modal on larger screens because there, both the sidebar and top nav menus use position: fixed and so are unaffected by padding on the body.

Using a different scroll container instead of html like #app or .VPContent avoids most of the hacky CSS in this PR but requires many other CSS and JS changes preserve the existing layout and to keep the outline links working.

[MarkusKeck]

Not sure if this is the best way to fix this problem, but I also think this should be resolved.
Currently a lot of my pages have this issue and the amount of affected pages will increase with the amount of interactive components added into vitepress in the future. (Native support for codeblocks for example, which gets currently rolled out)

[zqianem]

Whoops, forgot this was open (deleted the fork to stop the workflows). Will reopen.