Steps to replicate the issue (include links if applicable):
- load codex library as a dependency
- skin = vector legacy, timeless, or monobook
- emit this Codex Dialog HTML in #mw-content-subtitle
<div id="mw-fr-revision-details" class="mw-fr-revision-details-dialog" style="display: block;"> <div tabindex="0"> </div> <div class="cdx-dialog cdx-dialog--horizontal-actions"> <header class="cdx-dialog__header cdx-dialog__header--default"> <div class="cdx-dialog__header__title-group"> <h2 class="cdx-dialog__header__title">Page version status</h2> <p class="cdx-dialog__header__subtitle">This is a checked version of this page</p> </div> <button class="cdx-button cdx-button--action-default cdx-button--weight-quiet cdx-button--size-medium cdx-button--icon-only cdx-dialog__header__close-button" aria-label="Close" onclick="document.getElementById("mw-fr-revision-details").style.display = "none";" type="submit"> <span class="cdx-icon cdx-icon--medium cdx-fr-css-icon--close"></span> </button> </header> <div class="cdx-dialog__body"> This is the <a href="/w/index.php?title=Help:Page_validation&action=edit&redlink=1" class="new" title="Help:Page validation (page does not exist)">stable version</a>, <a rel="nofollow" class="external text" href="http://localhost:8080/w/index.php?title=Special:Log&type=review&page=Test">checked</a> on <i>2 September 2024</i>. </div> <footer class="cdx-dialog__footer cdx-dialog__footer--default"> <div class="cdx-dialog__footer__actions"> <button class="cdx-button cdx-button--action-progressive cdx-button--weight-primary cdx-button--size-medium cdx-dialog__footer__primary-action" onclick="window.location.href = 'http://localhost:8080/w/index.php?title=Test&diff=cur&oldid=5';" type="submit"> Review... </button> <button class="cdx-dialog__footer__default-action cdx-button cdx-button--default" onclick="document.getElementById("mw-fr-revision-details").style.display = "none";" type="submit"> Cancel </button> </div> </footer> </div> <div tabindex="0"> </div> </div>
What happens?:
- cdx-dialog__body font size too small
- cdx-dialog__body line height too small
What should have happened instead?:
- cdx-dialog__body font size is same size as vector-2022 and the reference screenshots in the documentation
- cdx-dialog__body line height is same size as vector-2022 and the reference screenshots in the documentation
Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):
Other information (browser name/version, screenshots, etc.):
- It's kind of hard to tell in the above screenshots for some reason, so here's a before and after video (click it to play) of applying the following code to Timeless:
.skin-vector-legacy .mw-fr-revision-details-dialog .cdx-dialog__body, .skin-monobook .mw-fr-revision-details-dialog .cdx-dialog__body, .skin-timeless .mw-fr-revision-details-dialog .cdx-dialog__body { font-size: 120%; line-height: 150%; }
- The downstream FlaggedRevs ticket for this is T373796: New FlaggedRevs popup's bottom line of text is too small in non-Vector 2022 skins