Since around April 2018, the echo icons in the Modern skin have been slightly elevated. Viewing any page as a logged-in user should do it, for an example:
Setting .mw-echo-notifications-badge { top: 0; } does the trick.
Description
Description
Details
Details
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Modern skin: Fix Echo icon, counter size and alignment with menu items. | mediawiki/skins/Modern | master | +43 -8 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | Jdlrobson | T16501 A way to hide the sidebar providing a "fullscreen" view | |||
| Resolved | ovasileva | T247032 [EPIC] Build collapsible sidebar and deploy to all test wikis | |||
| Resolved | ovasileva | T258072 [REQUEST] QA Support on the new header | |||
| Resolved | ovasileva | T250375 QA VE with new header and collapsible sidebar | |||
| Resolved | Edtadros | T246420 Limit content width, and refine alignment & styling of relevant elements | |||
| Resolved | • Demian | T256893 Move the PersonalMenu to the header | |||
| Resolved | Jdlrobson | T257143 Clean up the technical debt and inconsistencies of notification icon (Echo badge) positioning in different skins | |||
| Resolved | BUG REPORT | • Demian | T246931 Modern echo icons too high up |
Event Timeline
Comment Actions
Adding .mw-echo-notifications-badge { top: 0; } indeed centers the icons, but if you have any notifications pending, the number is now cut off.
| Before | After |
|---|---|
 |  |
Comment Actions
One could adjust the :after although I'm not certain what folks would consider appropriate there, given the sizes are fairly equivalent. Further left (65%?) and a bit down?
Comment Actions
Change 609806 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Modern@master] Modern skin: Fix Echo icon, counter size and alignment with menu items.
Comment Actions
Looks great to me! Not sure about usability, etc., but then again it's modern not vector so might be fine.
It looks like there's an uneven overlap on the bell and inbox, is there a chance that'd be even more pronounced with double-digits?
Comment Actions
The uneven overlap is present in all skins, but more pronounced in this aligment on the side. In Timeless it would look like:
I haven't looked into that particular aspect yet. Could be refined, if you will. It's adjusted by the right: -5%; rule on the :after pseudo-element of the badge. If you choose another number you prefer, I'll add that. You can choose different values for the two icons. The whole selector is: #pt-notifications-alert .mw-echo-notifications-badge:after, #pt-notifications-notice .mw-echo-notifications-badge:after
Comment Actions
Change 609806 merged by jenkins-bot:
[mediawiki/skins/Modern@master] Modern skin: Fix Echo icon, counter size and alignment with menu items.
Comment Actions
Change 637834 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Modern@master] Notification icons: don't show screen reader text when hovering
Comment Actions
A spin-off bug, please review: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Modern/+/637834
Comment Actions
Thank you for filing that ticket, Amorymeltzer! It was simpler for me to register the patch here, but now I'll move the patch.