List of steps to reproduce (step by step, including full links if applicable):
- Use the Vector 2022 skin
- Have a large number of notifications (see below for a bit of Javascript if that's not already the case)
- Set the browser's default font size in the settings to something larger, e.g. very large in Chrome-based browsers or 150% zoom with only the "only text" option selected in Firefox
- or, set the interface language to Classical Chinese (some other languages which use their own numeral systems also have the same problem, although less prominently)
What happens?:
The notification icons overlap.
What should have happened instead?:
The notification icons should adjust to the size of the text and not overlap.
Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc.:
A bit of Javascript to make the interface mimic having the maximum number of notifications:
for (let e of document.querySelectorAll("#pt-notifications-alert a, #pt-notifications-notice a")) {
e.dataset.counterText = mw.language.convertNumber("99+");
e.dataset.counterNum = "100";
e.classList.add("mw-echo-notifications-badge-long-label");
e.classList.remove("mw-echo-notifications-badge-all-read");
}Chrome-based browser using English and very large font sizes:
Chrome-based browser using Classical Chinese and default font sizes:
Firefox using English and default font sizes:
