Page MenuHomePhabricator

Vector 2022: RSS Feed icon overlaps text due to 0px left padding
Closed, DuplicatePublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:
The text overlaps with the feed icon, see this comparison of Vector 2022 and the regular Vector skin.

What should have happened instead?:
There should be no overlap and there should be a 16px padding

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
Browser: Firefox 109.0
(I actually reported this just a while ago on village pump, but then thought it would be better to report it here instead. I'll copy what I posted in village pump down below regarding the cause of this issue)

Cause:

Vector 2022 does have a left padding styling of 16px for the feed link as shown in the CSS:

a.feedlink {
  background-image: url(/w/resources/src/mediawiki.feedlink/images/feed-icon.png?2739e);
  background-image: linear-gradient(transparent,transparent),url(/w/resources/src/mediawiki.feedlink/images/feed-icon.svg?cf8c4);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  padding-left: 16px;
}

However, this padding is not taken into effect (confirmed by my browser developer tools) due to this styling with more specificity than a.feedlink (specifically, this selector applies: .vector-pinned-container .vector-pinnable-element .mw-list-item a):

@media screen
.vector-pinned-container .vector-pinnable-element .vector-pinnable-header, .vector-pinned-container .vector-pinnable-element .vector-menu-heading, .vector-pinned-container .vector-pinnable-element .mw-list-item a {
  padding-left: 0;
  padding-right: 0;
}