modal css broken

[kcpradyp]

Codepen reproduce

https://codesandbox.io/s/xj4rx88yzz

[gpascale]

I was tearing my hair out over this one. I believe the issue has to do with the overzealous rule:

.visible.transition { display: block !important; }

This causes the modal's container to have display: block instead of display: flex. Thus, the modal doesn't flex itself into place properly.

See attached photos showing how disabling this rule fixes the positioning:

My pen here: https://codepen.io/gpascale/full/VXbxMN/

[gpascale]

As a temporary workaround, I've stuck the following in my code, and it seems to work:

.dimmer.visible.transition {
  display: flex !important;
}

[jamesjryan]

@gpascale perfect timing, thanks for the fix.