Page MenuHomePhabricator

Heading CSS changes in Minerva cause issues with styled headings
Open, HighPublic2 Estimated Story PointsBUG REPORT

Description

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

Visit https://ru.m.wikipedia.org/wiki/Заглавная_страница and remove the style for headings that fixes them from display: flex to display: block

image.png (960×360 px, 125 KB)

What should have happened instead?:
Seems like somewhere in the heading HTML changes the following style was added:

.content .mw-parser-output .mw-heading, .content .mw-parser-output h1, .content .mw-parser-output h2, .content .mw-parser-output h3, .content .mw-parser-output h4, .content .mw-parser-output h5, .content .mw-parser-output h6 {
    display: flex;
}

This is probably caused by T365736: Roll out new heading markup to Vector legacy and Minerva skins..

It is too broad and ends up affecting all headings on the page, including ones that do not get affected by heading HTML changes in T13555: .mw-editsection links should not be part of the <h#> element since they do not affect <h1>s, <h2>s etc. with attributes present. Seems like the style should be limited just to .mw-heading and not to all heading-style elements since any presence of links etc. in them ends up messing up the headings entirely. I assume this has broader consequences than just ruWP’s main page (where I fixed this).

QA steps

NOTE: Testing for this task is only needed for production. The fix has been backported on 17th June. Please add Verified after QAing this task successfully.

Test 1

Screenshot 2024-06-17 at 11.37.03 AM.png (136×1 px, 26 KB)

Expected:
The heading (Избранная статья) should span 2 lines like so:

Screenshot 2024-06-17 at 11.41.48 AM.png (784×1 px, 118 KB)

Test 2

Expected:
Should be a space between "proferentem" and "rule"

Test 3

Expected:
space between "of" and "A Quiet Place"

QA Results - PROD

ACStatusDetails
1T367468#9901613
2T367468#9901613
3T367468#9901613

Event Timeline

Can reproduce for azwiki. I was going to report this too

That's my bad, sorry. Your investigation is exactly right on all counts. I will get the fix deployed soon (Monday at the latest).

Change #1043310 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/skins/MinervaNeue@master] Fix styles for new heading HTML

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

@matmarex The display flex also causes it to remove spaces between the text content and the links. You can set white-space: pre-wrap on the display:flex block. What happens is that flex is 'blockifying' the inline content, which will auto remove trailing whitespace. pre-wrap will give the (implicit) block content it's (inline) whitespace behavior back.

Screenshot 2024-06-14 at 20.08.27.png (798×1 px, 151 KB)

Screenshot 2024-06-14 at 20.08.58.png (682×1 px, 359 KB)

@TheDJ I may be misunderstanding your suggestion, but I don't think that would help – the text would still be laid out using the flex layout, which would interfere with the normal line wrapping. My solution is to remove the display:flex where it wasn't supposed to apply (it should be applied only to the wrappers around the headings containing the section toggle, the heading text, and the section edit link [and optional DiscussionTools stuff] – not to the heading text itself, but it was applied there erroneously due to a conflict between styles for the old and new headings).

Change #1043310 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Fix styles for new heading HTML

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

Change #1046767 had a related patch set uploaded (by Jforrester; author: Bartosz Dziewoński):

[mediawiki/skins/MinervaNeue@wmf/1.43.0-wmf.9] Fix styles for new heading HTML

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

Change #1046767 merged by Jforrester:

[mediawiki/skins/MinervaNeue@wmf/1.43.0-wmf.9] Fix styles for new heading HTML

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

Mentioned in SAL (#wikimedia-operations) [2024-06-17T20:46:15Z] <jforrester@deploy1002> Started scap: Backport for [[gerrit:1046767|Fix styles for new heading HTML (T367468)]]

Mentioned in SAL (#wikimedia-operations) [2024-06-17T20:50:42Z] <jforrester@deploy1002> jforrester: Backport for [[gerrit:1046767|Fix styles for new heading HTML (T367468)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-06-17T21:05:12Z] <jforrester@deploy1002> Finished scap: Backport for [[gerrit:1046767|Fix styles for new heading HTML (T367468)]] (duration: 18m 57s)

Test Result - PROD

Status: ✅ PASS
Environment: PROD
OS: macOS Sonoma 14.5
Browser: Chrome 126
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

✅ AC1: The heading (Избранная статья) should span 2 line

2024-06-17_14-10-37.png (318×1 px, 93 KB)

✅ AC2: space between "proferentem" and "rule

2024-06-17_14-12-42.png (662×1 px, 128 KB)

✅ AC3: space between "of" and "A Quiet Place

2024-06-17_15-56-12.png (720×1 px, 177 KB)

GMikesell-WMF added a project: Verified.
GMikesell-WMF updated the task description. (Show Details)
GMikesell-WMF subscribed.