[bug]: When I open/close a dialog, a margin shift happens

[wrsrsh]

Describe the bug

I tried setting modal={true} but that causes the dialog overlay to disappear

Affected component/components

Dialog

How to reproduce

N/A

Codesandbox/StackBlitz link

N/A

Logs

N/A

System Info

N/A

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[odysseaspapadimas]

Just had this issue as well on mobile but it was unreproducible in a new project and eventually found out that the issue was caused by the magic ui border beam component that existed on the same page, still figuring out exactly how to fix it

[wrsrsh]

Same here, It was unreproducible in a new project, I fixed this issue by removing a faulty custom scrollbar. Most probably if you have this issue, it is caused by some other component or css.

Should I close the issue?

[OmarAljoundi]

Maybe this is not the best approach here, but I had a similar issue as the project I was working on needed to support both LTR and RTL, I added this css lines:

html body[data-scroll-locked]:not([data-scroll-no-lock]) {
  min-width: 100%;
  margin-right: 0 !important;
  overflow: inherit !important;
}

Note that I have a condition which is :not([data-scroll-no-lock]), therefore the css won't apply unless I add it manually, the reason for that is removing the scrollbar and setting the margin to zero has impcated the <Sheet/> component, so I kept the default behivor as its and when ever I wanted to remove the margin and hide the scroll I would add these lines to the component:

  useEffect(() => {
    if (props.open == true)
      document.body.setAttribute("data-scroll-no-lock", "true");
    else document.body.removeAttribute("data-scroll-no-lock");
  }, [props.open]);

Happy coding!

[wrsrsh]

Thanks Man, I will close the issue now!