This is a dedicated ticket for the UI issues brought up at T179315#3720373 and T176070.
The VisualEditor interface is very pretty but the OOjs UI dialogs do not play well with custom-built messages. Some messages may include imagery and other content that are only suitable for full-width screens (or at least something wider than a few hundred pixels).
A prime example is MediaWiki:Abusefilter-unexplained-removal. It is shown when a user removes a large amount of content but does not explain why. The filter warns them to use an edit summary (because if they don't bitey patrollers will procedurally revert). We use a large font because for some reason a lot of people don't notice these messages. This is nearly illegible in the tiny OOjs UI dialog:
Here's one AbuseFilter notice that takes up just enough space to fit within the dialog, whereby the user may be unaware there is a "try again" button below it (this is I guess partially a Mac issue because it does not show the scrollbar, but point still stands):
Here's the (admittedly wordy) edit notice for the administrator's noticeboard on English Wikipedia. Without scrolling, we can't see the critical part that says "When you start a discussion about an editor, you must notify them on their user talk page":
Or how about this mainspace edit notice about an Arbitration decision:
I believe that while in most cases the dialogs are (sincerely) very pretty, they are in other cases hurting the user experience, obscuring important information, and possibly even leading some users to abandon their good-faith edits. Please consider some sort of UI compromise.
