Update modal.css

[vadimkiryanov]

When opening a modal window, the scrollbar disappears, but the content shifts

This padding automatically shifts the content to the left so that the user does not notice the content moving when the scrollbar disappears

Padding is equal to the standard scrollbar width

[saadeghi]

Can you use scrollbar-gutter instead?

Padding will be applied to all operating systems including iOS, Android, MacOS where scrollbars don't take any space.

We would only need that spacing in operating systems which dedicate a 15px space for scrollbars. Also it may not be always 15px based on user settings. CSS scrollbar-gutter takes care of the size as well.

[vadimkiryanov]

Can you use scrollbar-gutter instead?

Padding will be applied to all operating systems including iOS, Android, MacOS where scrollbars don't take any space.

We would only need that spacing in operating systems which dedicate a 15px space for scrollbars. Also it may not be always 15px based on user settings. CSS scrollbar-gutter takes care of the size as well.

Yeah, you are absolutely right! 👍

[TreyRuffy]

It looks like this now shifts the content to the left on pages with no scrollbar

[ShahadatAnik]

If i don't want to show the scrollbar, what should I do?

[gremo]

I experience the same problem as @TreyRuffy

I think it's a bug introduced with this change. No page is shifted to the left! @saadeghi

@ShahadatAnik

/* app.css */
@layer base {
  :root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
    scrollbar-gutter: revert !important;
  }
}

[thenetwrx]

This gave me a headache! I don't see the benefit for this behavior by default. But thanks @gremo ❤️

[nbran]

Having the Modal component change the styling of the root element on the assumption that a scrollbar is present is problematic and bound to result in unwanted behavior.