Following the recent Codex update, we should also add a new CSS rule that sets the correct font-size for the dialog contents (14px equivalent instead of 16px). This is happening because by teleporting the dialog outside of the body it results in the dialog not inheriting the body font-size.

From T343476: Ensure that Codex Dialogs are compatible with Vector

However, currently this workaround creates other problems, also due to styles applied by .vector-body.

Content inside of .vector-body inherits a rule that overrides the global font size for all elements:

.vector-body {

font-size: calc(1em * 0.875);

}
I assume that this is done so that article body text defaults to 14px even though the page itself technically uses 16px.

Unfortunately, this style rule means that if a user teleports a Codex Dialog outside of the main content area (so as to not conflict with the inherited z-index rule from .vector-body), the final size of text and other elements inside of the dialog will appear too large compared to the rest of the page.