Disable body scroll on modal open

text.md

1. Add class only present when modal is opened like <div class="modal-opened">
2. Prevent scrolling when modal is opened with CSS:

   html body:has(.modal-opened) {
     overflow: hidden;
   }

3. On modal open the scrollbar will disappear and cause a small layout shift. The easiest way to avoid this is using scrollbar-gutter. With this the page always reserves spacing for scrollbar even if the page doesn't need it.

   html {
     scrollbar-gutter: stable;
   }