q-dialog hides scrollbar, causing page to shift when displaying

[henrychoy]

What happened?

When q-dialog is displayed, it hides the browser scrollbar (if present), causing the page contents to shift right. Same issue as this one: #3212

This issue doesn't happen with static HTML, but when I have components that pull data in, such as q-table, that increase the page height and makes the vertical scrollbar necessary, then the issue appears.

What did you expect to happen?

q-dialog should not remove the scrollbar. Or at the very least, it should not cause the page contents to shift right

Reproduction URL

https://codepen.io/Henry-Choy-the-reactor/pen/NWVVpxa

How to reproduce?

I seem to be unable to reproduce this in codepen. But in my app, I tried a simple dialog below and it is hiding the scrollbar and causing the page to shift. When checking the css, I see that overflow is set to auto as expected. Can anyone provide any tips?

<q-dialog v-model="showDialog"> Hello </q-dialog>

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response