fix(modal): use resizeobserver

[lubber-de]

Description

This PR changes the refresh behavior of modals to recalculate their dimensions. The previous logic was checking for DOM-Nodes only, but the only need was to know when the modal gets resized.
For non supporting browsers i kept in the old logic as a fallback.

This now works in Firefox as well.

The dimmers scrollbar will now also not trigger content movement (#679) anymore when used in modern browsers. However this does not nicely work when detachable: false is used (tried a lot dealing with complicated tricks using the html tag as the scrollbar-gutter property does not work for the body element out of the box but it always left a white scrollbar even if the modal fitted into the viewport, so i decided to live with that limitation for now)
As this feature will always occupy a possible scrollbar width (even if a scrollbar won't appear), only modals which are supposed to be scrollable (by interaction or application logic while the modal is shown) should be given a new css class scrollable to gain the fix. Otherwise every modal wouldnt be centered anymore.

I also adjusted the dimmer positioning and close icon appearance when detachable:false in a custom context is used

Testcase

Resize the textarea, a scrollbar should appear to the modals dimmer
https://jsfiddle.net/lubber/drb6fpog/1/

Closes

#679
#2476
#2920

[mvorisek]

Why is this needed, will it imply scrollbars always shown? In the PR description there is mentioned something with detachable: false, is this related?

There is mentioned "The dimmers scrollbar will now also not trigger content movement anymore". I tried the demo (in Firefox) and when the textarea is resized, the content is unexpectedly always scrolled to the top when resized.

[lubber-de]

Why is this needed, will it imply scrollbars always shown? In the PR description there is mentioned something with detachable: false, is this related?

No, the scollbars are not always shown. This will occupy a possible shown scrollbar margin, but will not show an empty scrollbar in case the element is not body and no overflow happens
See example at #679

The problem with "detachable:false" in case context is body, is that body does not support this feature (scrollbar-gutter) (firefox+safari don't care at all, because those have their own implemented "overlay scrollbar feature")
Because of this the parent element would need to get scrollbar-gutter:stable instead. This basically works, but as the html element does not have any dimmer color set, it would display a white empty scrollbar in case the modal fits the screen. It also left a second scrollbar when closing the modal...very ugly

If you want to see/try my hack:

The jsfiddle does only barely show the issue as jsfiddle has a black parent background which the html element inside the iframe inherits (so the permanent occupied right scrollbar area is black, but still not the "dimmer black"
https://jsfiddle.net/lubber/cyjnta1d/3/

I also tried messing around with the dimmer animation to also make the html element inherits that, but the transition was not in sync and the code bloated away as we would need to support every possible dimmer variation just for that.

We would also need to support non body context elements... lots of code and cases for, IMHO, little benefit

@supports (scrollbar-gutter: stable) and (selector(:has(.f))) {
    html:has(body.undetached.dimmable) {
      overflow: auto;
    }
    html:has(body.undetached.dimmable.dimmed) {
      overflow: auto;
      scrollbar-gutter: stable;
    }
    body.undetached.dimmable.dimmed.dimmed {
      overflow: hidden;
    }
}

There is mentioned "The dimmers scrollbar will now also not trigger content movement anymore".

What was meant by this is #679 (comment)

I tried the demo (in Firefox) and when the textarea is resized, the content is unexpectedly always scrolled to the top when resized.

mmh, thats the in between discussion where i was not able to reproduce this.

The modal is only put to the top when the it detects the current modals size would not fit (thus adds the scrolling class). Whenever i am able to reproduce this, i take a look again and prepare a separate PR as some browser (firefox) measurements seem to provide questionable values inside module.can.fit() in some situations

[mvorisek]

Thank you for your detailed explanation and your work on this topic.

I tried the demo (in Firefox) and when the textarea is resized, the content is unexpectedly always scrolled to the top when resized.

mmh, thats the in between discussion where i was not able to reproduce this.

I meant the demo of/from this PR - https://jsfiddle.net/lubber/drb6fpog/1/

Steps to reproduce:

1. open the https://jsfiddle.net/lubber/drb6fpog/1/ in Firefox
2. resize the textarea vertically by dragging the right bottom corner to make the modal larger than the viewport
3. scroll down the modal
4. now try to resize the dropdown by dragging the right bottom corner
5. the modal is unexpectedly scrolled to the top immediately - I would expect no scroll/jump
6. also notice when you click the textarea resize corner and have F12 "Inspector" tab open, div.dimmer div.modal div in the inspector tab flashes yellow meaning something has changed, but I did not noticed/see any real css/class changes, meaning some same value is set from a mutation observer or even possibly worse, some value is set and immediatelly changed back

[lubber-de]

i take a look into this