Page MenuHomePhabricator

Mobile rules to keep images from overflowing (due to small screens) mess up templates
Closed, ResolvedPublic

Description

Based on IRC report. In particular infoboxes, but unclear where all (else?) this applies.

Event Timeline

Actual report from #wikimedia-dev:

<blub> someone doing timeless skin development present?
<blub> there's a bug and i have a fix, but do not want to sign up as a dev currently
<blub> it's a oneliner
<blub> the css block at https://github.com/wikimedia/mediawiki-skins-Timeless/blob/c8ab7c963a8d0d443a0427533834c84dd72d26ea/resources/screen-mobile.less#L228 causes problems for some infoboxes
<blub> to turn it of within the scope of infoboxes i propose to add the following line _after_ this block
<blub> #mw-content .infobox a > img { max-width: none !important; }
<blub> (none is the default value for this property and some templates that are used within the scope of infoboxes rely on this being the default)
<blub> bye for now

Offending code:

#mw-content a > img {
		height: auto !important;
		max-width: 100% !important;
}

I don't really want to use the offered line because it's so specific and infoboxes are on-wiki-defined stuff and they could be anything in practice, but I also can't think of any other solution that would actually work as-is besides just specifically overriding it for every template/whatever that needs it.

Or am I missing something? Do we have any core/common-extension-defined way to know if it's this sort of thing?

Is there a reason that the proposed CSS can't be placed in Mediawiki:Timeless.css? I assume, like all other skins, such exists.

(Because, right now, .infobox anything is wiki-specific, indeed.

Is there a reason that the proposed CSS can't be placed in Mediawiki:Timeless.css? I assume, like all other skins, such exists.

Definitely doable, and a sensible solution. But if this is going to affect every wiki with infoboxes, it's not like we have global css for the projects themselves, is it? Maybe we should just put it in the skin for now just so every one doesn't have to add it themselves... >.<

Is there a reason that the proposed CSS can't be placed in Mediawiki:Timeless.css? I assume, like all other skins, such exists.

Definitely doable, and a sensible solution. But if this is going to affect every wiki with infoboxes, it's not like we have global css for the projects themselves, is it? Maybe we should just put it in the skin for now just so every one doesn't have to add it themselves... >.<

That seems like more of an argument for a global template solution (T121470) or an infobox extension (MediaWiki-extensions-Capiunto) than it does for injuring skin purity. ;)

Maybe there should be a wikipage with known "you need to tweak these things for your wiki for this skin" type things.

We had a similar issue with that CSS rule in this template, the icon was disappearing on narrow displays. We tried to find places where this rule is actually helpful for us, but we couldn't find any, so we disabled it completely.

It may a bad idea though, we will see if we run into some problems because of that :P

It may a bad idea though, we will see if we run into some problems because of that :P

We did. We will be writing template-specific rules for this, that will have to suffice. Don't mind my complaining.

Well, the tables exclusion should fix this for infoboxes if other sites' infoboxes are like enwp's, whatever it is. Not that enwp's infoboxes seem affected?

Change 649111 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/skins/Timeless@master] Limit image overflow limits to not tables

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

Change 649111 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Limit image overflow limits to not tables

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

Isarra claimed this task.

Yeeeeah. Maybe.