Page MenuHomePhabricator

Notifications badge icon overlaps with other links
Closed, ResolvedPublic

Description

When I access
https://pt.wikipedia.org/wiki/Special:Preferences?useskin=vector
(or https://pt.wikipedia.org/wiki/Special:Preferences?useskin=monobook)
using Firefox 58.0.1 (64-bit) on Ubuntu 17.10, the badge overlaps with the "Talk" link at the top of the page.
For example, this is what I see using the Vector skin (and pt as the user language):

bug.png (78×1 px, 18 KB)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

@He7d3r I could not reproduce it locally. Could you provide the following details:

  • skin
  • browser
  • custom css
  • site (which wiki)

thanks!

Thanks @He7d3r for adding the details.

@SBisson - strangely, the issue is not present in betalabs (Portugese, FF58) if it's a real count:

Screen Shot 2018-02-08 at 5.39.15 PM.png (179×1 px, 71 KB)

But it's easily can be seen in betalabs or ptwiki (wmf.17, Chrome) with changing data-counter-textto 99+

<a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs" data-counter-num="4" data-counter-text="99+" title="Your notices">Notices (4)</a>

Screen Shot 2018-02-08 at 5.31.06 PM.png (162×1 px, 64 KB)

Screen Shot 2018-02-09 at 9.51.07 AM.png (110×558 px, 19 KB)

Screen Shot 2018-02-09 at 9.58.06 AM.png (106×556 px, 19 KB)

I do not have many notifications in production, so I cannot confirm the case when the real count is 99+.

Change 422434 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/extensions/Echo@master] Add extra margin for the badge when count is 99+

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

Change 422434 merged by jenkins-bot:
[mediawiki/extensions/Echo@master] Add extra margin for the badge when count is 99+

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

Checked in betalabs - the fix is in place:

Screen Shot 2018-03-28 at 12.35.22 PM.png (149×629 px, 29 KB)

I'll check the fix in wmf.28.

This is how it looks like on ptwiki now:

screenshot.png (46×472 px, 4 KB)

Not as good as T183539#4089165, but better than it was before.

Re-opening the issue - the overlapping is still happening - not as much as it was initially reported, but it's still noticeable (wmf.28 Chrome 64 on Mac):

Screen Shot 2018-04-07 at 7.49.18 PM.png (59×434 px, 14 KB)

Mooeypoo added a subscriber: Mooeypoo.
JTannerWMF claimed this task.
JTannerWMF added a subscriber: JTannerWMF.

We’ve decided to leave this issue closed after all, as the behavior is relatively acceptable.