Page MenuHomePhabricator

Misplaced Atom icon in responsive Monobook
Closed, ResolvedPublic

Description

The Atom icon in the "tools" section of a page like https://meta.wikimedia.org/wiki/Special:RecentChanges?useskin=monobook is misplaced in the responsive Monobook skin:

Monobook Atom icon.png (303×489 px, 7 KB)

(Reporting this here since I'm not sure if this is related to the "icon overflow" mentioned at T193568, and only appears to affect the responsive version of the skin.)

Event Timeline

AntiCompositeNumber added a project: CSS.

rSMNB resources/mobile.js.less:58 sets body.skin--responsive .mobile-menu-active a {padding-left: 0;}, which overrides the a.feedlink {padding-left: 16px;} from rMW resources/src/mediawiki.feedlink/feedlink.css:13. The overriding selector has a fairly high specificity, so to fix it in feedlink.css we'd have to use something like html body a.feedlink.feedlink. That would be a significant change in specificity and would break everything that is currently intentionally overriding that style, so I think it's better in this case to just duplicate the rule to mobile.js.less.

I also found that the mediawiki.feedlink styles weren't loading at all if the page started out in mobile mode, as the RL module didn't have a mobile target (T127268).

Change 721890 had a related patch set uploaded (by AntiCompositeNumber; author: AntiCompositeNumber):

[mediawiki/core@master] mediawiki.feedlink: add mobile target

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

Change 721891 had a related patch set uploaded (by AntiCompositeNumber; author: AntiCompositeNumber):

[mediawiki/skins/MonoBook@master] mobile.js.less: fix padding for a.feedlink

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

Change 721890 merged by jenkins-bot:

[mediawiki/core@master] mediawiki.feedlink: add mobile target

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

Change 721891 merged by jenkins-bot:

[mediawiki/skins/MonoBook@master] mobile.js.less: fix padding for a.feedlink

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

matmarex subscribed.

Thanks for the bug report and the patches!