wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-09-23 10:19:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix styles for new heading HTML

Browse source 
Do not apply 'display: flex' to all 'h1, h2, h3, h4, h5, h6' elements,
because it results in bad text layout within modern headings.

However, to support desktop Minerva with legacy headings, and avoid
incorrect styles being applied to unwrapper headings, we must
apply it to 'h1, h2, h3, h4, h5, h6' elements that may contain a
'.mw-headline'. Add a separate rule for that.

Bug: T367468
Change-Id: I87372907c38aa64b296634f6a5583a890f7fe9b2
(cherry picked from commit 2a44123f3f)
This commit is contained in:
Bartosz Dziewoński 2024-06-14 01:24:55 +02:00
parent fbd928018d
commit 7f4579d673
1 changed files with 16 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
resources/skins.minerva.base.styles/ui.less
View file

@ -163,11 +163,26 @@ main {
}
.mw-parser-output {
// We want to apply display: flex to the heading wrapper elements to style them right (T305971),
// but not to the heading text elements, because it results in bad text layout (T367468).
// This turns out to be difficult, because mobile/desktop, legacy/modern/unwrapped headings,
// and DiscussionTools/normal page generate a lot of different combinations of HTML markup.
// Support modern headings, DiscussionTools, and mobile mode
.mw-heading,
h1, h2, h3, h4, h5, h6 {
.section-heading {
display: flex;
}
// Support desktop Minerva legacy headings (this can only be done with a :has() selector,
// there's no other way to distinguish them from unwrapped headings, even though it lacks
// support for some browsers). Will be no longer needed when legacy headings are gone.
// FIXME: Remove this block when $wgParserEnableLegacyHeadingDOM is removed.
:is( h1, h2, h3, h4, h5, h6 ):has( .mw-headline ) {
display: flex;
}
// FIXME: Remove `.mw-headline` when $wgParserEnableLegacyHeadingDOM is removed.
h1, h2, h3, h4, h5, h6,
.mw-headline {
flex-grow: 1;