Wp-calypso: Site Settings: Content in some info popovers looks bad

[tyxla]

There are some cases, where info popovers are not positioned correctly:

We should find a good solution for these cases.

Reported originally by @eliorivero here: https://github.com/Automattic/jetpack/pull/7254#issuecomment-304665375.

[tyxla]

The easiest and painless option here is to follow Jetpack's pattern and change all of these labels to "Learn more". Do we have any reasons not to go that way?

[rickybanister]

Typically we prevent orphans and widows by adding nbsp's, but I haven't seen anyone suggest a perfect solution that would not impede translations.

If we can quickly and easily change all of them to 'learn more' that would likely be an alright solution, but I do prefer having more context to the links I click.

[eliorivero]

It's not so much about the icon dropping to the next line, but the fact that the popover is shown over the info icon. And yes, this happens in Calypso as well:

[rickybanister]

@eliorivero unfortunately I'm more confused than before—if it is no appearing where it should then that's just a simple bug that we should squash in both places.

I'm all for a simple solution, but limiting the number of characters in the popover isn't a sustainable solution. Can we break this apart and try to address the location of the popover first?

[eliorivero]

@rickybanister I never said we needed to change the text, see my PR https://github.com/Automattic/jetpack/pull/7254 I actually added all the text to match Calypso. In my last comment here I'm simply pointing that Marin is looking forward to change due to how it looks.
While I'm open to whatever it's decided on Calypso end, I fully agree with you that we should fix the positioning instead of trimming the text.
I don't currently have the bandwidth to fix the issue, that's why I annotated it in my PR, and will try to get to it when as soon as I can. If someone can fix it first in Calypso I'll port the fix to Jetpack.

[tyxla]

I've edited the description, it seems like this is a bug with the position calculation (probably in suggested() in components/popover/util.js). A quick check indicates that element.offsetHeight and element.offsetWidth don't return consistent values; so it's a browser thing. We'll have to look for a clever way to get around it.

[AnnaMag]

Fixed in https://github.com/Automattic/wp-calypso/pull/19992

[tyxla]

Confirmed - #19992 fixes this one for me 🎉