Page MenuHomePhabricator

Picture render with points
Closed, ResolvedPublic

Description

Strange render with a map that contain points on a small screen
See for example the map on https://fr.wikipedia.org/wiki/%C3%89nergie_au_Qatar?useskin=timeless
Points appear at the right of the map, at the opposite of vector where they are at the good place, in the map.

Event Timeline

ashley added subscribers: Isarra, ashley.

This appears to be caused by the following rule in Timeless' resources/screen-mobile.less:

.thumbinner {
	width: 100% !important;
}

Since these styles are applied only if the screen maximum width is 850px or less, this primarily affects Mobile users but is reproducible on desktop with any recent browser which allows emulating a different screen size.

@Isarra: It seems that this rule has been in place since you made Timeless responsive about two years ago. Would you happen to remember why it was added there or is this something we could simply remove and thus fix this bug?

Typically for images on the page, we don't want the text to wrap around them on mobile. This specifically applies to thumbs, which are floated left or right, usually, in the content.

Where it doesn't work is in templates because it's not actually text wrapping around them, but the rest of the template.

The rule, I believe, was originally stolen out of MF (unless it was some wikia thing, but I don't think so?), so we might see how that handles it for templates and stuff.

Okay, so the weird thumbhandling isn't necessarily an issue in general, just how it interacts with this specifically, so we might need to change how the containers are...

And the reason for the full-width thumbinner is so we don't waste multiple lines on narrow captions...

Isarra claimed this task.

Went ahead and just fixed it in the template, since this isn't really something we can reasonably predict mw-side:

https://fr.wikipedia.org/w/index.php?title=Modèle:Location_map%2B&diff=162133350&oldid=143934804