Steps to replicate the issue (include links if applicable):
- Navigate to a contributions page with the Vector 2022 skin (e.g. my contributions page)
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; }