Lists and other line breaking items appearing within paragraphs have the wrong vertical margins.
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	JScherer-WMF
	Dec 6 2023, 3:17 PM

Description

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

See comment in T351754
View article with <ol> or <ul>

What happens?:
Lists, pull quotes, and other "line breaking" items that appear within paragraphs have more vertical margins above them than they have below them.

What should have happened instead?:
If the list appears in the middle of a paragraph, the spacing above and below should be equidistan and smaller, if it appears at the end of a paragraph, the spacing above should be smaller than the spacing below.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
Screenshots available in parent ticket.

QA

See steps above

Test case 2
- Visit https://en.wikipedia.org/wiki/Shakira:_Bzrp_Music_Sessions,_Vol._53?useskin=vector-2022#Legacy_and_records

What happens?:

top of UL has big margin
bottom of UL has small margin

What should have happened instead?:

top of UL has ~~big~~ small margin
bottom of UL has ~~big~~ small margin

Signoff

Create follow-up ticket for global solution for spacing within paragraphs

Details

Subject	Repo	Branch	Lines +/-
Changes to list spacing	mediawiki/skins/Vector	master	+35 -10
Explicitly define padding for redirect link	mediawiki/core	master	+6 -2
Update VE core submodule to master (4ec4a75e4)	mediawiki/extensions/VisualEditor	master	+1 -1
Zero out padding in source mode paragraphs as well	VisualEditor/VisualEditor	master	+3 -1
Update <p> spacing to improve consistency of ul/ol spacing, also update heading spacing to be more consistent, relying on mw defaults more	mediawiki/skins/Vector	master	+35 -10
Simplify heading styles. Avoid using .vector-body	mediawiki/skins/Vector	master	+24 -27

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		ovasileva	T341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
Resolved		ovasileva	T313828 [EPIC] Typography: improve typography and allow for variable typography settings
Resolved		ovasileva	T345357 [Goal] Improve default typography on mobile and desktop sites
Resolved		ovasileva	T346064 Generate design options for new default
Resolved		ovasileva	T351693 Implement new default typography options
Resolved		None	T351754 Vector 2022 paragraph spacing is too small
Resolved	BUG REPORT	ovasileva	T352875 Lists and other line breaking items appearing within paragraphs have the wrong vertical margins.

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

bwang added a subscriber: KSarabia-WMF.Jan 12 2024, 4:25 PM

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/2e20a2b218/w

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/d948466f8f/w

Test wiki on Patch demo by BWang (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/2e20a2b218/w/~~

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/4d91ec315a/w

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/3137e750b4/w

Test wiki on Patch demo by BWang (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/d948466f8f/w/~~

Test wiki on Patch demo by BWang (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/4d91ec315a/w/~~

Test wiki on Patch demo by BWang (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/3137e750b4/w/~~

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/07095d3756/w

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/544e98641d/w

JScherer-WMF reassigned this task from JScherer-WMF to bwang.Jan 12 2024, 6:29 PM

bwang moved this task from Design Review to Code Review on the Web-Team-Backlog (FY2023-24 Q3 Sprint 1) board.Jan 16 2024, 5:27 PM

Change 989903 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Simplify heading styles. Avoid using .vector-body

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

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.15; 2024-01-23).Jan 16 2024, 6:00 PM

Test wiki on Patch demo by BWang (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/07095d3756/w/~~

Change 989911 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update <p> spacing to improve consistency of ul/ol spacing, also update heading spacing to be more consistent, relying on mw defaults more

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

Maintenance_bot removed a project: Patch-For-Review.Jan 16 2024, 8:31 PM

bwang reassigned this task from bwang to Edtadros.Jan 17 2024, 6:37 PM

bwang moved this task from Code Review to QA on the Web-Team-Backlog (FY2023-24 Q3 Sprint 1) board.

Test Result - Beta

Status: ❓Need More Info
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

view an article with a bulleted list
Test case 2
Visit https://en.wikipedia.org/wiki/Shakira:_Bzrp_Music_Sessions,_Vol._53?useskin=vector-2022#Legacy_and_records
❓ AC1: top of UL has big small margin
❓ AC2: bottom of UL has big small margin
@JScherer-WMF, The referenced task T351754 specifically calls out 14px at the end of a paragraph. This seems to no longer be the case. I wasn't sure if that is what Test case 1 was supposed to be. I've included screenshots with the spacing details so it can be determined if this was a pass or not. Qualitatively it looks fine. If it looks good let me know and I'll pass it.

The spec should have read 1em rather than a specific pixel value. This looks good. Thanks for checking @Edtadros .

JScherer-WMF moved this task from QA to Ready for Signoff on the Web-Team-Backlog (FY2023-24 Q3 Sprint 1) board.Jan 19 2024, 6:50 PM

Jdlrobson closed this task as Resolved.Jan 19 2024, 6:53 PM

DLynch mentioned this in T355805: Syntax highlighting in 2017 wikitext editor has extreme vertical cursor displacement.Jan 24 2024, 5:02 PM

Apart from T355805: Syntax highlighting in 2017 wikitext editor has extreme vertical cursor displacement the now reverted patch also caused part of hidden text to be visible on redirect pages:

Jdlrobson reopened this task as Open.Jan 25 2024, 10:50 PM

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q3 Sprint 2); removed Web-Team-Backlog (FY2023-24 Q3 Sprint 1).

ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Jan 29 2024, 3:43 PM

DLynch mentioned this in T356065: New paragraph spacing in Vector 2022 has created inconsistent comment spacing on talk pages.Jan 29 2024, 3:59 PM

Jdlrobson removed JScherer-WMF as the assignee of this task.Jan 29 2024, 4:16 PM

bwang moved this task from Ready for Development to Blocked on Others on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Jan 29 2024, 6:28 PM

Change 993505 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Update <p> spacing to improve consistency of ul/ol spacing, also update heading spacing to be more consistent, relying on mw defaults more (attempt 2)

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

gerritbot added a project: Patch-For-Review.Jan 29 2024, 7:05 PM

@Esanders can we talk about this in the editing sync tomorrow? We need to understand exactly what needs to be fixed where before we can re-apply this patch.

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/f094914739/w

Jdlrobson moved this task from Backlog to Font Size on the FY2023-24-WE 2.1 Typography and palette customizations board.Feb 1 2024, 5:31 PM

@Esanders are we just waiting on https://gerrit.wikimedia.org/r/c/VisualEditor/VisualEditor/+/992760 to move forward with this ticket?

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

[VisualEditor/VisualEditor@master] Zero out padding in source mode paragraphs as well

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

Change 992760 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] Zero out padding in source mode paragraphs as well

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

In T352875#9507043, @Jdlrobson wrote:

@Esanders are we just waiting on https://gerrit.wikimedia.org/r/c/VisualEditor/VisualEditor/+/992760 to move forward with this ticket?

I'm not sure the issue mentioned above by @Nikerabbit is resolved?

In T352875#9496544, @PatchDemoBot wrote:

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/f094914739/w

The spacing on talk pages is still uneven with this patch, see T356065.

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

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (4ec4a75e4)

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

Change 997584 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (4ec4a75e4)

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

Change 997958 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] Explicitly define padding for redirect link

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

Change 997958 merged by jenkins-bot:

[mediawiki/core@master] Explicitly define padding for redirect link

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

Jdlrobson moved this task from Blocked on Others to Code Review on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Feb 7 2024, 8:01 PM

Change 993505 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Changes to list spacing

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

Maintenance_bot removed a project: Patch-For-Review.Feb 7 2024, 9:30 PM

Jdlrobson reassigned this task from Jdlrobson to Edtadros.Feb 7 2024, 9:32 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.

ReleaseTaggerBot edited projects, added MW-1.42-notes (1.42.0-wmf.18; 2024-02-13); removed MW-1.42-notes (1.42.0-wmf.15; 2024-01-23).Feb 7 2024, 10:01 PM

Jdlrobson moved this task from Incoming to typography/darkmode on the Desktop Improvements (Vector 2022) board.Feb 8 2024, 5:14 PM

Test Result - Beta

Status: ❓
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

@JScherer-WMF take a look at the images below. I can't seem to see the padding in dev tools. Not sure if this is what it should look like.

View article with <ol> or <ul>
AC1: If the list appears in the middle of a paragraph, the spacing above and below should be equidistant and smaller, if it appears at the end of a paragraph, the spacing above should be smaller than the spacing below.

Visit https://en.wikipedia.org/wiki/Shakira:_Bzrp_Music_Sessions,_Vol._53?useskin=vector-2022#Legacy_and_records (prod testing only)
AC2: top of UL has small margin
bottom of UL has small margin

See above

The images here are correct. The Sharkira article has an error, though. Please see attached screenshot.

Screenshot 2024-02-08 at 7.50.03 PM.png (896×2 px, 395 KB)

JScherer-WMF reassigned this task from JScherer-WMF to Edtadros.Feb 9 2024, 2:58 AM

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

View article with <ol> or <ul>
✅ AC1: If the list appears in the middle of a paragraph, the spacing above and below should be equidistant and smaller, if it appears at the end of a paragraph, the spacing above should be smaller than the spacing below.
This is a pass per T352875#9527667 see screenshots above at at T352875#9525964

Visit https://en.wikipedia.org/wiki/Shakira:_Bzrp_Music_Sessions,_Vol._53?useskin=vector-2022#Legacy_and_records (prod testing only)
✅ AC2: top of UL has small margin
bottom of UL has small margin
This is a pass per T352875#9527667 see screenshots above at at T352875#9525964

Looks good, resolving

Something possibly related to this series of changes messed up the symmetry of the padding at two en.WP templates. See https://en.wikipedia.org/w/index.php?title=Template_talk:Quote_box&oldid=1209709062#bottom-of-box_sizing and https://en.wikipedia.org/w/index.php?title=Template_talk:Talk_quote_block&oldid=1209711889#Ugly_bottom_padding

Should I open a new bug report?

Krinkle mentioned this in T354975: [carryover] ResourceLoaderSkinModule should load core styles before skin styles.Feb 27 2024, 4:33 AM

p + ul work well now. What's about p + .mw-highlight (the latter is created by <syntaxhighlight>)? The space is huge, 0.5em padding + 1em margin

Jack_who_built_the_house mentioned this in T358724: Gap between h2 section heading and horizontal line got bigger.Feb 28 2024, 8:55 PM

In T352875#9581648, @Jack_who_built_the_house wrote:

p + ul work well now. What's about p + .mw-highlight (the latter is created by <syntaxhighlight>)? The space is huge, 0.5em padding + 1em margin

I've opened T358893 so this doesn't get lost (generally I recommend creating a new ticket for any additional concern - I for one sometimes miss notifications for closed tickets)

Jonesey95 mentioned this in T358921: Excessive space after p tags is causing new spacing issues.Mar 1 2024, 10:17 PM

Jack_who_built_the_house mentioned this in T358893: For consideration: Spacing between code blocks and paragraph seems a little big.Mar 1 2024, 11:34 PM

Sigh. Please don't use tricks like combining margin-top and padding-bottom. You're doing it to defeat margin collapsing, which is how the CSS box model is supposed to work. This patch makes Vector legacy and Vector 2022 behave very differently for certain inputs, mainly due to p-wrapping (T253072), and it's going to be a massive pain to work around from templates and TemplateStyles.

The skin should not be trying to control styling at such a quantum level for on-wiki content; you can kinda sorta get that to work for the Wikipedias and other projects whose content is supposed to follow One True House Style, but for a project like Wikisource that actually needs to vary this stuff from page to page doing this just makes it feel like the skin is fighting us every step of the way. I can deal with the 7px (.5rem) top and bottom margin if it's consistent across Vector 2010/2022, but a completely different way to achieve the effect between the two, with different values, and in a way deliberately designed to defeat basic box model behaviour…? Now I just want to throw a complete style reset in MediaWiki:Common.css and call it a day.

enWS has been dealing with the problem this patch is trying to address since the beginning, since the parser is too primitive to solve it properly (and Parsoid is just reimplementing the dumbness of the regex parser), by inserting three newlines between paragraphs that should be spaced as paragraphs, and two newlines between unspaced paragraphs (essentially separated just by the line-height). If you want extra space between your paragraphs, this is the way it has always been done, and it lets on-wiki contributors control whether the spacing is one or the other. This patch breaks ~20 years worth of content created based on that assumption, and it's trying to reimplement in the skin the behaviour of the parser. That's not going to end well.

(Tbh I'd really like to hear the rationale behind using margin-top + padding-bottom as opposed to e.g. negative margin for certain element sequences, like I suggested in T352875#9424919. I've never heard of such combination being an anti-pattern, but there certainly seems to be something fishy about it. Wouldn't want to see T360917 devolve into hunting for a multiplicity of one-off cases for no good reason.)

Jack_who_built_the_house mentioned this in T361767: Don't use padding-bottom for paragraphs.Apr 4 2024, 12:03 AM

So I filed T361767. And one other thing: If you solved this issue by just removing top margins for lists, that's not a good fix. You've just moved it to another place where it will eventually surface. Like in this case:

Example 1

Example 2

Example 3

So should I file a task that lists after tables (and God knows what else) have wrong vertical margins?.. I hope not.

Jack_who_built_the_house attached a referenced file: F44418407: image.png. (Show Details)Apr 4 2024, 2:53 AM

In T360917 we will re-evaluate margins/paddings and aim to fix all the issues that have been documented. Creating new tickets that are not linked to from the description of that ticket and commenting on existing resolved tickets which are not being monitored will further fragment the conversation and likely lead to more problems on the long run. Please bubble up anything important to T360917 to make sure it's not missed

(I summarized the problem in T361767, so everything else is just trivia, but may reiterate it there if that helps.)

Thanks!!

Jack_who_built_the_house mentioned this in T360917: [Spike 3hrs] Unintended vertical spacing behaviour .Apr 5 2024, 4:15 AM

Test wiki on Patch demo by BWang (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/544e98641d/w/~~

Jack_who_built_the_house mentioned this in T362939: [Design] Fix unintended vertical spacing behavior in Minerva and Vector.May 22 2024, 4:40 AM

Test wiki on Patch demo by BWang (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmcloud.org/wikis/f094914739/w/~~

	F41822032: Screenshot 2024-02-08 at 7.50.03 PM.png
	Feb 9 2024, 2:55 AM

	F44416600: image.png
	Apr 4 2024, 2:48 AM

	F44416508: image.png
	Apr 4 2024, 2:48 AM

	F42188023: image.png
	Feb 27 2024, 8:02 PM

	F41817006: screenshot 433.png
	Feb 8 2024, 5:17 PM

Lists and other line breaking items appearing within paragraphs have the wrong vertical margins. Closed, ResolvedPublic2 Estimated Story PointsBUG REPORTActions

Description

QA

Signoff

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

Test Result - Beta

QA Steps

Test Result - Beta

QA Steps

Lists and other line breaking items appearing within paragraphs have the wrong vertical margins.
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Related Objects
Search...