Steps to replicate the issue (include links if applicable):
- Edit a page that has a nested bullet list (e.g. https://www.mediawiki.org/w/index.php?title=Design_System_Team/Chores&action=edit§ion=3)
- Compare the rendering of the nested bullet list in the read view vs in VisualEditor
What happens?:
The first bullet point in each nested list doesn't have enough vertical separation from the parent list item in VisualEditor.
| Read view | VisualEditor |
What should have happened instead?:
The two should look the same (or more similar), and they do in other skins, including legacy Vector.
Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia): WMF production
Other information (browser name/version, screenshots, etc.):
This appears to happen because of an interaction between Vector-2022's CSS and VE's CSS. Specifically, Vector-2022 sets a negative top margin on ul elements to cancel out the bottom margin it expects on the preceding p element, but VE's CSS zeroes out the margin on that p for other reasons (because it's a "generated" paragraph).