I did a quick test with MonoBook as well as Timeless and could not spot obvious layout issues. The font size in the popup is fixed to 14px, independent from the skin. The advantage is that the popup appears identical in all skins. The disadvantage is that the font size in the popup does not necessarily match the font size from the skin. Unfortunately these skins don't use anything we could easily inherit, but relative em values. The resulting font size is less than 14px in MonoBook, and more than 14px in Timeless. There are certainly ways to change this, but it's not as easy as one might think. Simply removing the hard-coded 14px makes the text crazy small in MonoBook, for example.

In T220202#6587725, @thiemowmde wrote:

Simply removing the hard-coded 14px makes the text crazy small in MonoBook, for example.

Monobook and Modern has a trick up its sleeve: body { font-size: x-small; } (10px typical when browser is set to 16px). CSS defines x-small as minimum 9px, even if the user sets the browser to <14.4px (16px * 0.9). Article font-size is set to 127% (Monobook), 130% (Modern) in relation to this, thereby setting a lower bound for the article font-size at 11.43px (9px * 127% - MonoBook), 11.7px (9px * 130% - Modern). This trick is no longer relevant (and used) for skins with bigger font-size and with the availability of simple zooming (Ctrl/Cmd-Plus) in all browsers.

The other skins have 16px as body font-size, not the article's font-size, therefore those aren't simpler either.

Current rule: .mwe-popups { font-size: 14px; }

To use the same font-size as skin's base (article) font-size and be accessible (respecting browser setting):

.mwe-popups { font-size: 0.875em; } // 14px - default to current size, with a11y
.skin-vector .mwe-popups { font-size: 0.875em; } // 14px
.skin-timeless .mwe-popups { font-size: 0.95em; } // 15.2px
.skin-minerva .mwe-popups { font-size: 1em; } // 16px
.skin-monobook .mwe-popups { font-size: 1.27em; } // 12.7px
.skin-modern .mwe-popups { font-size: 1.3em; } // 13px

Using rem will soon be the baseline (T261334, T262946). This changes the rule for Modern and MonoBook:

.mwe-popups { font-size: 0.875rem; } // 14px - default to current size, with a11y
.skin-vector .mwe-popups { font-size: 0.875rem; } // 14px
.skin-timeless .mwe-popups { font-size: 0.95rem; } // 15.2px
.skin-minerva .mwe-popups { font-size: 1rem; } // 16px
.skin-monobook .mwe-popups { font-size: 0.79375rem; } // 12.7px
.skin-modern .mwe-popups { font-size: 0.8125rem; } // 13px

The em rules can be kept as fallback.
The rules can be added to Popups or the individual skins.

Alternative solution without skin-specific rules:

• Move the popup element .mwe-popups from body into #content: at least these 5 skins have that element id in common. Inherit the skin's article font-size (.mwe-popups { font-size: 1em; } or drop the rule). Positioning the popup needs to be altered in JS.