fix(VOverlay): force real scrollbar visibility to avoid shift

[J-Sek]

Noticable shift by ~1px:

• on docs Dialogs
• with 150% scaling on the OS level

Also larger shift when using <v-main scrollable> (see example below)

Cause: window.innerWidth - document.documentElement.offsetWidth returns wrong value (verified on vanilla Chrome and Brave, on Linux) unless scaling is exactly 100%.

Note: scrollbar-gutter requires Safari 18.1 (we claim 16.4 is gonna be supported by v4)

<template>
  <v-app theme="dark">
    <v-main scrollable>
      <v-container>
        <v-dialog max-width="500" scroll-strategy="block">
          <template v-slot:activator="{ props: activatorProps }">
            <v-btn
              v-bind="activatorProps"
              color="surface-variant"
              text="Open Dialog"
              variant="flat"
            ></v-btn>
          </template>

          <v-card title="Dialog">
            <v-card-text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </v-card-text>
          </v-card>
        </v-dialog>
      </v-container>

      <v-img
        src="https://cdn.cosmicjs.com/68b46aa0-d4fe-11ee-9ce5-59949019255e-VUETIFY-ONE-3.png"
        width="200"
        height="300"
        class="position-absolute right-0"
      />

      <v-card width="200" height="200vh" />
    </v-main>
  </v-app>
</template>

[KaelWD]

I did actually try this first but the blank space when a scrim is up is pretty fugly.

[J-Sek]

Maybe overscroll-behavior: contain could help instead?
It would be kinda hacky... let's say scrim would have a pseudo-element making it scrollable. If we hide scrim scrollbar, user wheel events won't reach the page.