Repository: ui
Issue: [bug]: Drawer hides scrollbar and causes page to resize
Labels: bug

### Describe the bug

By default, when opened, the Drawer add classes to both the html and body, removing the scrollbar and adding some classes to compensate for it, but the page in the background still resizes.

https://github.com/user-attachments/assets/abaa7a6b-182b-4d4c-9788-fa3d42e80a8f

I don't know if that's an expected behavior, since the Drawer is mainly used in mobile and that doesn't seem to happen there.

### Troubleshooting

- I tried applying the zeroRight class from the [library](https://github.com/theKashey/react-remove-scroll-bar) to both the html and body (separately), but that was ignored when the Drawer opened.
- I tried scrollbar-gutter as well but that would be ignored when the Drawer was opened.
- In my search for a solution, I saw many people [complaining](https://github.com/radix-ui/primitives/discussions/1586) about the Radix Dialog having problems with position fixed.
- I added the noBodyClasses prop on the Drawer as false, which stops the Drawer from adding the following classes to the body component:

![Captura de Tela 2024-07-17 às 16 20 34](https://github.com/user-attachments/assets/70f36ac1-a118-418f-8eea-3e69ac2bb8ff)

Which allowed the following classes, added by react-remove-bar, to be active (I can't actually tell if it indeed comes from the library, I'm assuming that based on the names). 

![Captura de Tela 2024-07-17 às 16 26 18](https://github.com/user-attachments/assets/ae361d80-e3c1-4231-a4f3-f6209d66dd82)

Now that the body is display relative, the padding added to the html works as well as the margin-right in the body, creating a double-compensation for the lack of scrollbar. At first I tried removing the margin, and at first glance that seemed to solve the problem, but then realized that when you move the Drawer around, the padding applied in the html is set to 0px, causing the page to resize again.

### My workaround

I've added the noBodyClasses prop to false as default in the component and removed the shouldScaleBackground as it made no sense to me to leave it as true by default: 

```
// If you want you can declare this props when using the Drawer, but in my case it made more sense to do it this way.
const Drawer = ({
  noBodyStyles = true,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
  <DrawerPrimitive.Root noBodyStyles={noBodyStyles} {...props} />
);
Drawer.displayName = "Drawer";
```

and the following code to the global.css file:

```
@layer base {
  html {
    padding-right: 0px !important;
  } 
}
```

So far I found no drawbacks in using the Drawer that way. No margin is added to the page when there's no scrollbar and the Drawer worked the same in the mobile*. I think this happens due to something in the Vaul library (as using the noBodyClasses and some CSS tweaks solve the issue), but I don't think I have the knowledge required to fix it directly in there.

*Its top is being hidden by the dynamic URL bar in the bottom of the mobile nav, but I think this is easily solvable with dvh. I haven't tried it yet.

### Affected component/components

Drawer

### How to reproduce

This behavior can be seen in the [Shadcn's Drawer](https://ui.shadcn.com/docs/components/drawer) component page, although it's not that noticeable as in my example 'cus they're using the Scale Background thing.

1. Go to [Shadcn's Drawer](https://ui.shadcn.com/docs/components/drawer) page
2. Open the first Drawer and close it paying attention to the resize that happens when the scrollbar is rendered
3. To make it more noticeable, you can open the dev tools and resize the page to a size where the components in the page are more cramped

This will not happen if you toggle device toolbar

### Codesandbox/StackBlitz link

https://ui.shadcn.com/docs/components/drawer

### Logs

_No response_

### System Info

```bash
Mac M1 running Sonoma 14.4.1, 
Arc Browser 1.51.0 (51691)
```


### Before submitting

- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues