Page MenuHomePhabricator

Collapsible heading styling should have clear: both to prevent weird bugs
Open, MediumPublicBUG REPORT

Description

This CSS should be changed to clear: both to prevent bugs like these:

.client-js .collapsible-heading, .client-js .collapsible-block {
    clear: left;
}

image.png (1×709 px, 47 KB)

(unless there was something to justify it being clear: left in the first place)

Event Timeline

(Oops, no idea why it was posted twice.)

Why can't the template clear itself? (Also could you please share the URL you are using here)

It was https://ru.wikipedia.org/wiki/Википедия:Кандидаты_в_избранные_статьи before I fixed it. https://ru.m.wikipedia.org/wiki/Википедия:Кандидаты_в_хорошие_статьи currently has the same issue on some resolutions.

As for the question, sure, it can, but why should a heading be broken if for some reason it wasn’t cleared? After all, Wikipedians do a lot of weird stuff, so sometimes this isn’t noticeable for months (or for years in this case).

The benefit of doing this in the template is it will work in future for newer skins. Who knows, maybe in 5 years Minerva will be surplus to requirements but we'll be having this same issue with whatever the new skin is.

To be honest, I see this as a feature. The section headings are not full width on https://en.m.wikipedia.org/wiki/Benedict_Joseph_Fenwick?useskin=minerva (desktop resolution) with the infobox for example so not clearing floats has a benefit. Templates should have the flexibility to do whatever they want here.

I guess that example makes the initial suggestion somewhat invalid for desktop resolutions, yeah. Though I don’t see how having a hack for it on the resolutions where various float bugs should possibly not be shown (<720px?) would be bad.

ovasileva triaged this task as Medium priority.Sep 12 2022, 10:17 AM
ovasileva moved this task from Incoming to Current Fiscal Year on the Web-Team-Backlog board.

No need for templates, this can also easily be reproduced with right-aligned images, see https://www.mediawiki.org/w/index.php?title=User:Daimona_Eaytoy/Sandbox&oldid=6082229:

image.png (1×780 px, 115 KB)

The example uses [[File:Azimuth-Altitude schematic it.svg|right|300px]]. In this case I'd say that it's not an editor's responsibility to add any styles to the image so that it works with Minerva.

I think that this could be resolved with min-width on the headings, rather than clear: both. We did that for headings modified by DiscussionTools, which also adds a bunch of extra items to the heading: T335823.

A related issue with images that aren't properly specified as "thumb" was recently noticed at https://en.wikipedia.org/w/index.php?title=Wikipedia:Village_pump_(technical)&oldid=1183369888#Highly_visible_mobile_bug
It sounds like matmarex's proposed solution would also help with that, as well as things like templates.

mw:Help:Images specifically says that images using the "right" option are supposed to float right, but the VPT thread contains a screen shot showing the header text overlaid on the image. I don't think "thumb" should be required to stop that from happening, unless mw:Help:Images needs to be corrected.

I tried using the "frameless" option, but that apparently causes the header text overlap as well. Why would only "thumb" work around this bug?

Ah, right, I mis-read the documentation. I've struck out part of my prior comment. Sorry about that.

I think that this could be resolved with min-width on the headings, rather than clear: both. We did that for headings modified by DiscussionTools, which also adds a bunch of extra items to the heading: T335823.

Since this is not getting fixed for such a long time and continues to cause issues, I added min-width: 10em locally (= 240px) in https://ru.wikipedia.org/wiki/MediaWiki:Minerva.css#L-6