I took a look at this issue. At large resolutions, the Echo tooltip is positioned via JS to maintain the correct top/left coordinates on browser resize. At lower resolutions, the tooltip stops these calculations in favour of stretching the tooltip edge-to-edge via CSS. This stretching is what causes the pointer to change position, because it's position is effected by the parent element.

The Echo notification popup has some margins at large resolutions

But it doesn't at small resolutions

If we add margins to the popup at low resolutions (18px seems like the magic number) then that seems to fix the issue.

I think these changes could be made in Echo alongside the .mw-echo-ui-overlay media-query styles.

Thanks for posting additional context from our discussion @Jdrewniak.

When the counter for echo notifications is present, the pointer is positioned at the right edge of the displayed number:

When the number is not present, the pointer definitely looks off:

In T366672#9864414, @Jdrewniak wrote:

If we add margins to the popup at low resolutions (18px seems like the magic number) then that seems to fix the issue.

I think these changes could be made in Echo alongside the .mw-echo-ui-overlay media-query styles.

nit: the pointer could be aligned to the center of the icon. it seems that with the 18px solution there's still some minor misalignment.

Looks like this requires a fix in the Echo repo so assuming the Growth team will work on this. let me know if that's not the case!

Change #1041714 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/Echo@master] Adjust notification popup arrow in small screens

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

In T366672#9871516, @Jdlrobson wrote:

Looks like this requires a fix in the Echo repo so assuming the Growth team will work on this. let me know if that's not the case!

Thanks for the ping, I followed @Jdrewniak steps. Edit: using 18px resulted in imperfect alignment with the icon as mentioned by @AAlhazwani-WMF. More details below.

In T366672#9867034, @AAlhazwani-WMF wrote:

nit: the pointer could be aligned to the center of the icon. it seems that with the 18px solution there's still some minor misalignment.

Good catch, I found the popup is being configured to have 20 (pixels I guess) of padding from it's parent container, see ui/mw.echo.ui.NotificationBadgeWidget.js#118. When that padding disappears in small screens as @Jdrewniak mentions the arrow clipping has ~20px of incorrect offset to the right. I modified the patch so when the widget is created the containerPadding is set according to the screen width. Hopefully that works acceptably in other skins. This way the notifications popup still stretches to the full width which seems the original design.

Change #1041714 merged by jenkins-bot:

[mediawiki/extensions/Echo@master] Adjust notification popup arrow in small screens

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

@Sgs i'm unsure if this patch has already landed on wikifunctions beta (https://wikifunctions.beta.wmflabs.org/wiki/Wikifunctions:Main_Page), but i see some (positive!) changes, so i'm assuming so. that said, it seems that the pointer it's still just 1 px off from the center of the icon 🥲

In T366672#9925386, @AAlhazwani-WMF wrote:

@Sgs i'm unsure if this patch has already landed on wikifunctions beta (https://wikifunctions.beta.wmflabs.org/wiki/Wikifunctions:Main_Page), but i see some (positive!) changes, so i'm assuming so. that said, it seems that the pointer it's still just 1 px off from the center of the icon 🥲

Thanks for testing @AAlhazwani-WMF. the change has already landed in wikifunctions beta. I am not sure how did you generate the grid line to check the "center" alignment, curious to learn so I can use it. In my tests, I've used Chrome dev tools inspector, and, visually, I indeed perceive a 1 pixel-off alignment to the left of the center axis. However I also see that defect in wide screen resolution. Afaik we did not modify the wide screen branch of the code, so, I think it is possible that the 1 pixel miss-alignment was already present prior to wmf.11. test2wiki which is still on wmf.10 also presents the same incorrect positioning (see screenshots, apologies for not getting rid of the dev tools popup).

wmf.10 wide	wmf.11 wide	wmf.10 small	wmf.11 small

At this point, my wonder is if this is a bug in Echo or on OOUI's arrow computation in general. I'm failing to take an screenshot that includes a center axis to test in OOUI demo page but I'd say the miss-alignment is there. Feedback to identify where the source of the issue is is welcome. If this issue is affecting all popup instances it sounds worth investigating further. Thoughts @Jdrewniak @Jdlrobson?

@Sgs your right, this 1px offset seems to be affecting all OOUI popups. Personally though, I don't think this is a high priority issue. OOUI is in maintenance mode and the 1px offset doesn't hinder functionality in any way. Design-System-Team currently maintains OOUI.

The center line is visible in chrome devtools for flexbox layouts and can be turned from the Layout panel, but it can also be created using a linear-gradient background image (like in the OOUI screenshot below) :)

OOUI Demo page	VE inline link popup	Echo icon

I agree it does not seem a high priority issue. I we should be able to replace the OOUI widget by T363375: [EPIC] Popover: Add Popover component to Codex in the mid-term, for the Echo menu at least. If @Etonkovidova agrees I think we can resolve this issue.