Page MenuHomePhabricator

mw-body-content margin is breaking previews in VE
Closed, ResolvedPublic2 Estimated Story Points

Description

mw-body-content is used to give content-like styling to previews in VE, but also adds a 16px top margin.

This breaks:
Citoid re-use dialog:

image.png (249×370 px, 43 KB)

(numbers should be aligned with text)
Ref previews:
image.png (153×406 px, 23 KB)

(unnecessary whitespace)

QA Results - Beta

ACStatusDetails
1T331458#8722977
2T331458#8722977

QA Results - Prod

ACStatusDetails
1T331458#8731738
2T331458#8731738

Event Timeline

Can the selector that applies the margin be made more specific, or use the ID, e.g. .vector-body > .mw-body-content or #mw-content-text?

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

[mediawiki/skins/Vector@master] Only apply mw-body-content margin to main body

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

Change 895325 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/skins/Vector@master] Change margin-top element from .mw-body-content to #mw-content-text

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

ovasileva triaged this task as Medium priority.Mar 9 2023, 3:52 PM
ovasileva moved this task from Incoming to Current Quarter on the Web-Team-Backlog board.

Change 895325 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Change margin-top element from .mw-body-content to #mw-content-text

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

Change 895328 abandoned by Esanders:

[mediawiki/skins/Vector@master] Only apply mw-body-content margin to main body

Reason:

See Ia040f85ed484db21129c3673808bc2ad71962ec3

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

EAkinloose subscribed.

✅ numbers align with texts

Screenshot 2023-03-21 at 03.19.43.png (876×812 px, 92 KB)

✅ Reasonable spacing

Screenshot 2023-03-21 at 03.20.13.png (672×890 px, 73 KB)

Screenshot 2023-03-21 at 03.22.34.png (702×896 px, 84 KB)

Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Navigate to an article with citations
Edit using the Visual Editor
Click the citation button on the VE toolbar
Select the Re-use tab
✅ AC1: Verify the numbers align correctly with the text.

Screenshot 2023-03-23 at 3.00.51 PM.png (642×996 px, 249 KB)

Hover over a citation
✅ AC2: Verify the white space is not excessive as shown in the task description.

Screenshot 2023-03-23 at 3.01.24 PM.png (600×993 px, 278 KB)

Edtadros removed Edtadros as the assignee of this task.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Navigate to an article with citations
Edit using the Visual Editor
Click the citation button on the VE toolbar
Select the Re-use tab
✅ AC1: Verify the numbers align correctly with the text.
{F36924974}

Hover over a citation
✅ AC2: Verify the white space is not excessive as shown in the task description.
{F36924976}