Page MenuHomePhabricator

Nested list items are displayed too close to their parent list item in VisualEditor in Vector-2022
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:
The first bullet point in each nested list doesn't have enough vertical separation from the parent list item in VisualEditor.

image.png (258×953 px, 64 KB)
image.png (217×945 px, 63 KB)
Read viewVisualEditor

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).

Event Timeline

Could the editing team explain what styles VisualEditor has that are conflicting with Vector so that the web team can advise on how to fix this? It looks like VisualEditor is disabling Vector 2022's margins?

If the negative margins are an issue, we could potentially take on the suggestion here in T366389 to replace negative margins with a different solution to potentially kill 2 birds with 1 stone. but this code has been very tricky and fragile across all the different spacing possibilities

The spacing is read mode is a bit off too, with extra space shown when increasing indentation:

image.png (222×344 px, 18 KB)

The negative margin is for p + ul, which assumes the p has a positive margin that needs cancelling. In VE - all content is wrapped in a <p> including content inside list items. These wrapper paragraphs have no margin.

Change #1155669 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Fix indented list margins in Vector 2022

https://gerrit.wikimedia.org/r/1155669

Change #1155669 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Fix indented list margins in Vector 2022

https://gerrit.wikimedia.org/r/1155669

Ryasmeen edited projects, added Verified; removed Editing QA.

Checked on Beta cluster, looks good.

ppelberg claimed this task.